feat: add comprehensive loading feedback (#18)

frontend/src/app/components/tenant-form/tenant-form.html

@@ -1,7 +1,13 @@
 <section class="form-page">
   <header class="page-heading">
     <div>
-      <button mat-button type="button" class="back-action" (click)="cancelled.emit()">
+      <button
+        mat-button
+        type="button"
+        class="back-action"
+        [disabled]="saving()"
+        (click)="cancelled.emit()"
+      >
         ← Retour
       </button>
       <p class="eyebrow">Dossier locataire</p>
@@ -9,56 +15,79 @@
       <p>Renseignez les coordonnées nécessaires à la gestion du bail.</p>
     </div>
   </header>
-  <form class="entity-form" #tenantForm="ngForm" ngNativeValidate (ngSubmit)="save(tenantForm)">
-    <div class="form-grid">
-      <mat-form-field appearance="outline"
-        ><mat-label>Prénom</mat-label
-        ><input
-          matInput
-          name="firstName"
-          [ngModel]="firstName()"
-          (ngModelChange)="firstName.set($event)"
-          required
-      /></mat-form-field>
-      <mat-form-field appearance="outline"
-        ><mat-label>Nom</mat-label
-        ><input
-          matInput
-          name="lastName"
-          [ngModel]="lastName()"
-          (ngModelChange)="lastName.set($event)"
-          required
-      /></mat-form-field>
-      <mat-form-field appearance="outline"
-        ><mat-label>E-mail</mat-label
-        ><input
-          matInput
-          type="email"
-          name="email"
-          [ngModel]="email()"
-          (ngModelChange)="email.set($event)"
-          required
-          autocomplete="email"
-      /></mat-form-field>
-      <mat-form-field appearance="outline"
-        ><mat-label>Téléphone</mat-label
-        ><input
-          matInput
-          type="tel"
-          name="phone"
-          [ngModel]="phone()"
-          (ngModelChange)="phone.set($event)"
-          pattern="^(?:(?:0\d(?:[ .-]?\d){8})|(?:(?:\+|00)\d(?:[ .()-]?\d){7,14}))$"
-          autocomplete="tel"
-      /></mat-form-field>
-      <mat-form-field appearance="outline" class="full-field"
-        ><mat-label>Adresse complète</mat-label
-        ><input matInput name="address" [ngModel]="address()" (ngModelChange)="address.set($event)"
-      /></mat-form-field>
-    </div>
-    <div class="form-actions">
-      <button mat-button type="button" (click)="cancelled.emit()">Annuler</button
-      ><button mat-flat-button type="submit" class="primary-action">Enregistrer</button>
-    </div>
+  <form
+    class="entity-form"
+    #tenantForm="ngForm"
+    ngNativeValidate
+    (ngSubmit)="save(tenantForm)"
+    [attr.aria-busy]="saving()"
+  >
+    @if (saveError()) {
+      <div class="alert-error" role="alert">{{ saveError() }}</div>
+    }
+    <fieldset [disabled]="saving()" [attr.inert]="saving() ? '' : null">
+      <div class="form-grid">
+        <mat-form-field appearance="outline"
+          ><mat-label>Prénom</mat-label
+          ><input
+            matInput
+            name="firstName"
+            [ngModel]="firstName()"
+            (ngModelChange)="firstName.set($event)"
+            required
+        /></mat-form-field>
+        <mat-form-field appearance="outline"
+          ><mat-label>Nom</mat-label
+          ><input
+            matInput
+            name="lastName"
+            [ngModel]="lastName()"
+            (ngModelChange)="lastName.set($event)"
+            required
+        /></mat-form-field>
+        <mat-form-field appearance="outline"
+          ><mat-label>E-mail</mat-label
+          ><input
+            matInput
+            type="email"
+            name="email"
+            [ngModel]="email()"
+            (ngModelChange)="email.set($event)"
+            required
+            autocomplete="email"
+        /></mat-form-field>
+        <mat-form-field appearance="outline"
+          ><mat-label>Téléphone</mat-label
+          ><input
+            matInput
+            type="tel"
+            name="phone"
+            [ngModel]="phone()"
+            (ngModelChange)="phone.set($event)"
+            pattern="^(?:(?:0\d(?:[ .-]?\d){8})|(?:(?:\+|00)\d(?:[ .()-]?\d){7,14}))$"
+            autocomplete="tel"
+        /></mat-form-field>
+        <mat-form-field appearance="outline" class="full-field"
+          ><mat-label>Adresse complète</mat-label
+          ><input
+            matInput
+            name="address"
+            [ngModel]="address()"
+            (ngModelChange)="address.set($event)"
+        /></mat-form-field>
+      </div>
+      <div class="form-actions">
+        <button mat-button type="button" (click)="cancelled.emit()">Annuler</button
+        ><button mat-flat-button type="submit" class="primary-action">
+          <span aria-live="polite">
+            @if (saving()) {
+              <mat-spinner diameter="18" aria-hidden="true" /> Enregistrement…
+            } @else {
+              Enregistrer
+            }
+          </span>
+        </button>
+      </div>
+    </fieldset>
   </form>
 </section>