fdsa

bookie/src/app/header-footer/header-footer.component.html

@@ -1,23 +1,29 @@
-<form class="flex-col">
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="5" />
+} @else if (listResource.error()) {
+  <app-error-state (retryAction)="listResource.reload()" />
+} @else {
+  <form class="flex-col">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Header / Footer</mat-label>
+        <mat-select [formField]="form.id" (selectionChange)="show($event)">
+          @for (s of list(); track s) {
+            <mat-option [value]="s.id">
+              {{ s.name }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Text</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.text"></textarea>
+      </mat-form-field>
+    </div>
+  </form>
   <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Header / Footer</mat-label>
-      <mat-select [formField]="form.id" (selectionChange)="show($event)">
-        @for (s of list(); track s) {
-          <mat-option [value]="s.id">
-            {{ s.name }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
+    <button type="button" mat-raised-button color="primary" (click)="save()">Save</button>
   </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Text</mat-label>
-      <textarea matInput matAutosizeMinRows="5" [formField]="form.text"></textarea>
-    </mat-form-field>
-  </div>
-</form>
-<div class="row-container">
-  <button type="button" mat-raised-button color="primary" (click)="save()">Save</button>
-</div>
+}

bookie/src/app/header-footer/header-footer.component.ts

@@ -9,6 +9,8 @@ import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { HeaderFooter } from './header-footer';
 import { HeaderFooterService } from './header-footer.service';
 
@@ -29,6 +31,8 @@ export interface HeaderFooterFormData {
     MatOptionModule,
     MatSelectModule,
     FormField,
+    ErrorStateComponent,
+    SkeletonLoaderComponent,
   ],
 })
 export class HeaderFooterComponent {