fdsa

bookie/src/app/sales/running-tables/running-tables.component.html

@@ -1,27 +1,33 @@
-<h2>Running Tables</h2>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="5" />
+} @else if (listResource.error()) {
+  <app-error-state (retryAction)="listResource.reload()" />
+} @else {
+  <h2>Running Tables</h2>
 
-<div class="tables-grid">
-  @for (table of list(); track table) {
-    <mat-card
-      class="flex-col square-button"
-      matRipple
-      (click)="navigateToBill(table)"
-      [class.primary]="table.status !== 'running' && table.status !== 'printed'"
-      [class.accent]="table.status === 'running'"
-      [class.strong-accent]="table.status === 'printed'"
-    >
-      <h3>{{ table.name }}</h3>
-      <span>{{ table.guest }}</span>
-      <span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
-      @if (table.date) {
-        <span>{{ table.date }}</span>
-      }
-      @if (table.amount) {
-        <span>{{ table.amount | currency: 'INR' }}</span>
-      }
+  <div class="tables-grid">
+    @for (table of list(); track table) {
+      <mat-card
+        class="flex-col square-button"
+        matRipple
+        (click)="navigateToBill(table)"
+        [class.primary]="table.status !== 'running' && table.status !== 'printed'"
+        [class.accent]="table.status === 'running'"
+        [class.strong-accent]="table.status === 'printed'"
+      >
+        <h3>{{ table.name }}</h3>
+        <span>{{ table.guest }}</span>
+        <span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
+        @if (table.date) {
+          <span>{{ table.date }}</span>
+        }
+        @if (table.amount) {
+          <span>{{ table.amount | currency: 'INR' }}</span>
+        }
+      </mat-card>
+    }
+    <mat-card class="flex-col square-button strong-primary" matRipple (click)="openBill()">
+      <h3>Open Bill</h3>
     </mat-card>
-  }
-  <mat-card class="flex-col square-button strong-primary" matRipple (click)="openBill()">
-    <h3>Open Bill</h3>
-  </mat-card>
-</div>
+  </div>
+}