From fec3b4fd1d8aa3daf05e39a6555abe5a840a052a Mon Sep 17 00:00:00 2001 From: ErickHub192 Date: Sat, 12 Sep 2026 17:53:48 -0600 Subject: [PATCH] La sala dice si esta cargando en vez de verse vacia El error mas reportado del experimento con estudiantes no era un error. Con internet lento, quien recarga ve el chat vacio y el preview en blanco unos segundos, mientras el estado de la sala viaja. Eso se ve IGUAL que haberlo perdido todo, asi que recargaban otra vez, y otra: "se trabo el sistema y reinicie la actividad", "no cargaba y reinicie multiples veces", "al principio la pagina se cayo y toco volver a hacer todo". Nueve de veintidos descripciones de error son de esto, y en casi todas se resolvio solo esperando. Nadie perdio nada. Faltaba decirles que estaban esperando. El preview ya lo hacia bien, con su barra y sus etapas de arranque; el chat no distinguia nada. Ahora hay un estado que sabe si llego el `joined`, que es el unico momento en que el cliente conoce la sala de verdad: - Sin `joined` y sin mensajes, el chat dice que esta cargando. - Sin `joined` pero con mensajes ya pintados (una reconexion), una barra arriba avisa que se cayo la conexion, sin tapar lo que ya se lee. - El preview deja de afirmar que la sala esta vacia cuando todavia no lo sabe. Un `disconnect` baja ese estado: socket.io ya reconecta solo, asi que esto es senal y no logica de reconexion. Y en cuanto llega el `joined`, una sala recien creada vuelve a decir que esta vacia, que es la verdad y es el caso que no habia que romper. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01L1nFf8JaKeGedJ6RaZQYZ8 --- web/src/App.tsx | 38 ++++++++++++++++++++++++++++++++++++++ web/src/i18n.tsx | 4 ++++ web/src/styles.css | 24 ++++++++++++++++++++++++ 3 files changed, 66 insertions(+) diff --git a/web/src/App.tsx b/web/src/App.tsx index f0a995f..f4c9d07 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -273,6 +273,17 @@ function Sala({ * blanco sin que nada diga que algo está pasando. */ const [cargandoFrame, setCargandoFrame] = useState(false); + + /** + * Ya llegó el estado de la sala (el `joined`). + * + * Sin esto, entre que el socket conecta y el server responde, el chat vacío se + * ve IGUAL que una sala donde nadie ha hablado. Con internet lento eso son + * varios segundos, y en las sesiones con estudiantes fue lo más reportado: + * recargaban, veían todo en blanco y creían que habían perdido su trabajo. + * Nadie perdió nada, faltaba decirles que estaban esperando. + */ + const [unido, setUnido] = useState(false); const [draft, setDraft] = useState(""); /** * El nombre de la sala, o null si nadie la ha nombrado (ahí se ve el id). @@ -459,6 +470,10 @@ function Sala({ const socket = connectSocket(); socketRef.current = socket; + // Se cayó la conexión. Socket.io reconecta solo, así que esto no arregla + // nada: solo evita que la sala se vea normal mientras ya no llega nada. + socket.on("disconnect", () => setUnido(false)); + socket.on("connect", () => { socket.emit("join", { roomId, name }); // La key ya configurada viaja sola: no se pide de nuevo en cada sala. @@ -467,6 +482,7 @@ function Sala({ }); socket.on("joined", (p: JoinedPayload) => { + setUnido(true); setMembers(p.members); setNombre(p.nombre ?? null); recordarNombre(roomId, p.nombre ?? null); @@ -905,6 +921,12 @@ function Sala({
{/* Chat izquierda */}