diff --git a/web/src/App.tsx b/web/src/App.tsx index f4c9d07..7efa79f 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -284,6 +284,25 @@ function Sala({ * Nadie perdió nada, faltaba decirles que estaban esperando. */ const [unido, setUnido] = useState(false); + + /** + * Ya pasó el tiempo suficiente como para que valga la pena decir "cargando". + * + * Con conexión buena el `joined` llega en milisegundos, y un indicador que + * aparece y desaparece en ese rato es peor que no poner nada: parpadea en cada + * entrada a una sala, incluso en una recién creada que sabemos vacía. Este + * retraso deja pasar el caso rápido en silencio, que es el común, y solo habla + * cuando la espera de verdad se siente. + */ + const [esperaLarga, setEsperaLarga] = useState(false); + useEffect(() => { + if (unido || !roomId) { + setEsperaLarga(false); + return; + } + const t = setTimeout(() => setEsperaLarga(true), 600); + return () => clearTimeout(t); + }, [unido, roomId]); const [draft, setDraft] = useState(""); /** * El nombre de la sala, o null si nadie la ha nombrado (ahí se ve el id). @@ -467,6 +486,10 @@ function Sala({ // menú y el botón de crear. if (!roomId) return; + // Cambiar de sala deja el estado de la anterior: sin esto, entrar a una + // segunda sala la pinta como si ya se supiera qué hay dentro. + setUnido(false); + const socket = connectSocket(); socketRef.current = socket; @@ -924,7 +947,7 @@ function Sala({ {/* Con mensajes ya en pantalla, el chat se ve normal aunque no llegue nada. Esta barra es lo único que distingue "nadie ha escrito" de "se cayó el wifi". */} - {roomId && !unido && messages.length > 0 && ( + {esperaLarga && messages.length > 0 && (
{t.cargandoSala}
@@ -1393,7 +1416,7 @@ function Sala({{t.ningunaSala}
{t.eligeOCrea}
> - ) : !unido ? ( + ) : esperaLarga ? ( // Hay sala, pero su estado todavía no llega. Decir aquí que está // vacía sería inventar: no se sabe. <>