fix(shorts): flux dedie avec filtre duree serveur + loop + replis

src/components/shorts/watch-short.component.html

@@ -18,11 +18,14 @@
     <div class="rounded-xl overflow-hidden shadow-2xl ring-1 ring-slate-700/50 bg-black/90"
          style="height: calc(100vh - 10rem); max-height: calc(100vh - 10rem); aspect-ratio: 9 / 16; width: auto; max-width: 92vw;">
       @if (embedUrl(); as url) {
-        <iframe [src]="url" class="w-full h-full" frameborder="0"
+        <iframe [src]="url" [title]="current()?.title || 'Short video'" class="w-full h-full" frameborder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowfullscreen></iframe>
       } @else if (loading()) {
-        <div class="w-full h-full animate-pulse bg-slate-800"></div>
+        <div class="w-full h-full flex flex-col gap-3 items-center justify-center bg-slate-800 text-slate-400 text-sm">
+          <div class="h-8 w-8 rounded-full border-2 border-slate-600 border-t-red-500 animate-spin" aria-hidden="true"></div>
+          <span role="status">Chargement des Shorts…</span>
+        </div>
       } @else if (error()) {
         <div class="w-full h-full flex flex-col gap-3 items-center justify-center text-slate-300 p-6 text-center">
           <span>{{ error() }}</span>
@@ -47,6 +50,9 @@
     </div>
 
     <!-- Navigation buttons -->
+    @if (busyMore()) {
+      <div class="absolute top-2 left-1/2 -translate-x-1/2 px-2 py-1 rounded-full bg-black/60 text-white text-xs" role="status">Chargement…</div>
+    }
     <button (click)="prev()" [disabled]="!canPrev()"
             class="absolute -right-14 top-6 hidden md:flex items-center justify-center h-10 w-10 rounded-full bg-slate-800/70 hover:bg-slate-700 text-white ring-1 ring-slate-700/60 disabled:opacity-40"
             aria-label="Previous short">