Benutzerstatistiken im Benutzerverzeichnis falsch

Fehler
8

Dies war ein übler “Race Condition” zwischen dem “Sentinel”, den wir verwenden, um zu erkennen, wann wir die Aktion “Mehr laden” auslösen müssen, und dem Rendern der Zeilen im Benutzerverzeichnis :exploding_head:

Das Problem

Wenn es mindestens 50 Benutzer gab, löste die Seite /u (Benutzerverzeichnis) loadMore sofort beim ersten Laden aus, bevor der Benutzer nach unten scrollen konnte. Dies führte dazu, dass automatisch eine unerwünschte zweite Seite mit Ergebnissen geladen wurde.

Grundursache

Race Condition während des anfänglichen Seitenladens:

  1. Benutzer navigiert zu /u
  2. controllers/users beginnt mit dem Laden von Daten (isLoading: true)
  3. Die Vorlage wird mit ConditionalLoadingSpinner gerendert, der einen Spinner anzeigt
  4. Daten kommen an, isLoading wird false
  5. Der Spinner wird ausgeblendet, DirectoryTable beginnt mit dem Rendern von 50 Benutzern
  6. Das Sentinel-Element für “Mehr laden” wird in das DOM eingefügt
  7. Der IntersectionObserver wird erstellt und beginnt sofort mit der Beobachtung
  8. Zu diesem Zeitpunkt berechnet die Tabelle noch das Layout/erweitert sich auf die volle Höhe
  9. Das Sentinel ist kurzzeitig im Viewport sichtbar (ca. 292 Pixel von oben), bevor sich die Tabelle erweitert
  10. Der Observer erkennt die Schnittmenge → löst loadMore aus :cross_mark:
  11. Die Tabelle erweitert sich vollständig auf die volle Höhe (ca. 3689 Pixel)
  12. Das Sentinel bewegt sich an die richtige Position (ca. 3959 Pixel, unterhalb des Viewports)

Der Observer war “zu eifrig” – er begann mit der Beobachtung, bevor der Inhalt sein Layout abgeschlossen hatte, und fing das Sentinel in dem kurzen Moment ab, in dem die Tabelle noch nicht ihre endgültige Höhe erreicht hatte.

Die Lösung

Verzögern Sie die Erstellung des Observers, bis der Inhalt bereit ist:

Ein @isLoading-Parameter wurde zu LoadMore hinzugefügt, der verhindert, dass der IntersectionObserver erstellt wird, während der Inhalt noch geladen wird.

So funktioniert es jetzt

Seitenaufruf → isLoading=true → Modifier überspringt Observer-Erstellung
             ↓
Daten laden → isLoading=false → Modifier wird erneut ausgeführt, erstellt Observer
             ↓
Tabelle vollständig erweitert → Sentinel an der richtigen Position (unterhalb des Viewports)
             ↓
Benutzer scrollt nach unten → Sentinel tritt in den Viewport ein → loadMore wird ausgelöst ✓
5 „Gefällt mir“