feat: add comprehensive loading feedback (#18)

frontend/src/app/components/dashboard-page/dashboard-page.html

@@ -8,7 +8,10 @@
     <span class="status-pill"><span></span>Espace sécurisé</span>
   </header>
   <div class="dashboard-grid">
-    <article class="feature-card feature-card-primary">
+    <article
+      class="feature-card feature-card-primary"
+      [attr.aria-busy]="workspace.apartmentLoadState().loading"
+    >
       <div class="feature-icon" aria-hidden="true">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
           <path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16M2 21h20" />
@@ -17,12 +20,39 @@
       </div>
       <div>
         <p class="eyebrow">Votre portefeuille</p>
-        <h2>{{ workspace.apartments().length }} appartement{{ workspace.apartments().length > 1 ? 's' : '' }}</h2>
+        @if (!workspace.apartmentLoadState().loaded && workspace.apartmentLoadState().loading) {
+          <span
+            class="skeleton-line skeleton-line-title count-skeleton"
+            aria-label="Chargement du nombre d’appartements"
+          ></span>
+        } @else if (
+          !workspace.apartmentLoadState().loaded && workspace.apartmentLoadState().error
+        ) {
+          <div class="count-error" role="alert">
+            <p>{{ workspace.apartmentLoadState().error }}</p>
+            <button mat-button type="button" (click)="workspace.loadApartments()">Réessayer</button>
+          </div>
+        } @else {
+          <h2>
+            {{ workspace.apartments().length }} appartement{{
+              workspace.apartments().length > 1 ? 's' : ''
+            }}
+          </h2>
+          @if (workspace.apartmentLoadState().loading) {
+            <mat-progress-bar mode="indeterminate" aria-label="Actualisation des appartements" />
+          }
+          @if (workspace.apartmentLoadState().error) {
+            <div class="count-error" role="alert">
+              <p>{{ workspace.apartmentLoadState().error }}</p>
+              <button mat-button type="button" (click)="workspace.loadApartments()">
+                Réessayer
+              </button>
+            </div>
+          }
+        }
         <p>Centralisez les informations essentielles de vos biens.</p>
       </div>
-      <button mat-button type="button" (click)="showApartments()">
-        Gérer mes appartements
-      </button>
+      <button mat-button type="button" (click)="showApartments()">Gérer mes appartements</button>
     </article>
     <article class="feature-card user-profile">
       <div class="large-avatar">{{ userInitial() }}</div>