fdsa

bookie/src/app/sales/products/products.component.html

@@ -1,23 +1,29 @@
-<div class="tables-grid">
-  <mat-card
-    class="flex-col square-button warn"
-    matRipple
-    [routerLink]="['../../menu-categories']"
-    queryParamsHandling="preserve"
-  >
-    <h3>Back</h3>
-  </mat-card>
-  @for (item of list(); track item) {
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="5" />
+} @else if (listResource.error()) {
+  <app-error-state (retryAction)="listResource.reload()" />
+} @else {
+  <div class="tables-grid">
     <mat-card
-      class="flex-col square-button"
+      class="flex-col square-button warn"
       matRipple
-      (click)="addSku(item)"
-      [class.accent]="item.hasHappyHour"
-      [class.disabled]="item.isNotAvailable"
-      [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
+      [routerLink]="['../../menu-categories']"
+      queryParamsHandling="preserve"
     >
-      <h3>{{ item.name }}</h3>
-      <span>{{ item.price | currency: 'INR' }}</span>
+      <h3>Back</h3>
     </mat-card>
-  }
-</div>
+    @for (item of list(); track item) {
+      <mat-card
+        class="flex-col square-button"
+        matRipple
+        (click)="addSku(item)"
+        [class.accent]="item.hasHappyHour"
+        [class.disabled]="item.isNotAvailable"
+        [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
+      >
+        <h3>{{ item.name }}</h3>
+        <span>{{ item.price | currency: 'INR' }}</span>
+      </mat-card>
+    }
+  </div>
+}

bookie/src/app/sales/products/products.component.ts

@@ -6,13 +6,15 @@ import { RouterLink } from '@angular/router';
 
 import { ProductQuery } from '../../core/product-query';
 import { ProductService } from '../../product/product.service';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { BillService } from '../bill.service';
 
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.sass'],
-  imports: [CurrencyPipe, MatRippleModule, RouterLink, MatCardModule],
+  imports: [CurrencyPipe, MatRippleModule, RouterLink, MatCardModule, ErrorStateComponent, SkeletonLoaderComponent],
 })
 export class ProductsComponent {
   private productService = inject(ProductService);