feat: add comprehensive loading feedback (#18)

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

@@ -26,6 +26,25 @@
   border-radius: 22px;
   background: var(--surface);
 }
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.alert-error {
+  margin-bottom: 18px;
+  padding: 13px 15px;
+  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
+  border-radius: 12px;
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.primary-action mat-spinner {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+}
 .form-grid {
   display: grid;
   gap: 2px;

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>

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

@@ -3,6 +3,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Tenant } from '../../services/tenant.service';
 
 export interface TenantSaveRequest {
@@ -12,12 +13,20 @@ export interface TenantSaveRequest {
 
 @Component({
   selector: 'app-tenant-form',
-  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+  ],
   templateUrl: './tenant-form.html',
   styleUrl: './tenant-form.css',
 })
 export class TenantForm {
   readonly tenant = input<Tenant | null>(null);
+  readonly saving = input(false);
+  readonly saveError = input('');
   readonly cancelled = output<void>();
   readonly submitted = output<TenantSaveRequest>();
 
@@ -32,6 +41,7 @@ export class TenantForm {
   }
 
   save(form: NgForm): void {
+    if (this.saving()) return;
     if (form.invalid) {
       form.control.markAllAsTouched();
       return;