Estatísticas do usuário incorretas no diretório de usuários

Bug
8

Isso acabou sendo uma condição de corrida desagradável entre o “sentinela” que usamos para detectar quando precisamos acionar a ação “carregar mais” e a renderização das linhas no diretório de usuários :exploding_head:

O Problema

Quando havia pelo menos 50 usuários, a página /u (diretório de usuários) acionava loadMore imediatamente no primeiro carregamento, antes que o usuário pudesse rolar para baixo. Isso causou o carregamento automático de uma segunda página de resultados indesejada.

Causa Raiz

Condição de corrida de tempo durante o carregamento inicial da página:

  1. Usuário navega para /u
  2. controllers/users começa a carregar dados (isLoading: true)
  3. O template renderiza com ConditionalLoadingSpinner mostrando o spinner
  4. Os dados chegam, isLoading se torna false
  5. O spinner é ocultado, DirectoryTable começa a renderizar 50 usuários
  6. O sentinela LoadMore é inserido no DOM
  7. IntersectionObserver é criado e começa a observar imediatamente
  8. Neste momento, a tabela ainda está calculando o layout/expandindo para a altura total
  9. O sentinela fica brevemente visível na viewport (~292px do topo) antes da tabela expandir
  10. O observador detecta a interseção → aciona loadMore :cross_mark:
  11. A tabela termina de expandir para a altura total (~3689px)
  12. O sentinela se move para a posição correta (~3959px, abaixo da viewport)

O observador foi “muito ansioso” - ele começou a observar antes que o conteúdo terminasse seu layout, capturando o sentinela durante o breve momento em que a tabela ainda não havia atingido sua altura final.

A Correção

Atrasar a criação do observador até que o conteúdo esteja pronto:

Adicionado um parâmetro @isLoading a LoadMore que impede a criação do IntersectionObserver quando o conteúdo ainda está carregando.

Como Funciona Agora

Carregamento da página → isLoading=true → Modifier pula a criação do observador
             ↓
Carregamento dos dados → isLoading=false → Modifier executa novamente, cria o observador
             ↓
Tabela totalmente expandida → Sentinela na posição correta (abaixo da viewport)
             ↓
Usuário rola para baixo → Sentinela entra na viewport → loadMore é acionado ✓
5 curtidas