Estadísticas de usuario incorrectas en el directorio de usuarios

Error
8

Esto terminó siendo una desagradable “condición de carrera” entre el “centinela” que usamos para detectar cuándo necesitamos activar la acción de “cargar más” y la representación de las filas en el directorio de usuarios :exploding_head:

El Problema

Cuando había al menos 50 usuarios, la página /u (directorio de usuarios) activaba loadMore inmediatamente al cargar por primera vez, antes de que el usuario pudiera desplazarse hacia abajo. Esto provocó que una segunda página de resultados no deseada se cargara automáticamente.

Causa Raíz

Condición de carrera de tiempo durante la carga inicial de la página:

  1. El usuario navega a /u
  2. controllers/users comienza a cargar datos (isLoading: true)
  3. La plantilla se renderiza con ConditionalLoadingSpinner mostrando el spinner
  4. Llegan los datos, isLoading se convierte en false
  5. El spinner se oculta, DirectoryTable comienza a renderizar 50 usuarios
  6. El centinela de LoadMore se inserta en el DOM
  7. IntersectionObserver se crea y comienza a observar inmediatamente
  8. En este momento, la tabla todavía está calculando el diseño/expandiéndose a la altura completa
  9. El centinela es brevemente visible en la ventana gráfica (~292px desde la parte superior) antes de que la tabla se expanda
  10. El observador detecta la intersección → activa loadMore :cross_mark:
  11. La tabla termina de expandirse a la altura completa (~3689px)
  12. El centinela se mueve a la posición correcta (~3959px, debajo de la ventana gráfica)

El observador fue “demasiado entusiasta”: comenzó a observar antes de que el contenido terminara su diseño, capturando el centinela durante el breve momento en que la tabla aún no había alcanzado su altura final.

La Solución

Retrasar la creación del observador hasta que el contenido esté listo:

Se agregó un parámetro @isLoading a LoadMore que evita que se cree el IntersectionObserver cuando el contenido aún se está cargando.

Cómo Funciona Ahora

Carga de página → isLoading=true → Modifier omite la creación del observador
             ↓
Carga de datos → isLoading=false → Modifier se vuelve a ejecutar, crea el observador
             ↓
Tabla completamente expandida → Centinela en la posición correcta (debajo de la ventana gráfica)
             ↓
El usuario se desplaza hacia abajo → El centinela entra en la ventana gráfica → loadMore se activa ✓
5 Me gusta