Fix: Eliminar parpadeo de interfaz
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 28s

- Solo actualizar users/devices si los datos realmente cambiaron
- Aumentar debounce de SSE de 1s a 3s para reducir frecuencia de updates
- Evitar re-renders innecesarios comparando JSON antes de actualizar
This commit is contained in:
2025-11-24 18:31:13 -06:00
parent f3753f2e04
commit 4da390c963

View File

@@ -51,7 +51,11 @@ async function fetchUsers() {
const res = await fetch('/api/users'); const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`); if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
const data = await res.json(); const data = await res.json();
users.value = data.items || []; const newItems = data.items || [];
// Solo actualizar si los datos cambiaron para evitar re-renders innecesarios
if (JSON.stringify(newItems) !== JSON.stringify(users.value)) {
users.value = newItems;
}
} catch (error) { } catch (error) {
if (isAuthError(error)) handleAuthError(); if (isAuthError(error)) handleAuthError();
else console.error('Error fetching users:', error); else console.error('Error fetching users:', error);
@@ -76,7 +80,11 @@ async function fetchDevices() {
const res = await fetch('/api/devices'); const res = await fetch('/api/devices');
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`); if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
const data = await res.json(); const data = await res.json();
devices.value = data.items || []; const newItems = data.items || [];
// Solo actualizar si los datos cambiaron para evitar re-renders innecesarios
if (JSON.stringify(newItems) !== JSON.stringify(devices.value)) {
devices.value = newItems;
}
} catch (error) { } catch (error) {
if (isAuthError(error)) handleAuthError(); if (isAuthError(error)) handleAuthError();
else console.error('Error fetching devices:', error); else console.error('Error fetching devices:', error);
@@ -129,7 +137,7 @@ function setupSse() {
refreshTimer = setTimeout(async () => { refreshTimer = setTimeout(async () => {
await Promise.all([fetchUsers(), fetchDevices()]); await Promise.all([fetchUsers(), fetchDevices()]);
refreshTimer = null; refreshTimer = null;
}, 1000); }, 3000); // Debounce de 3 segundos para evitar parpadeos
} }
ev.addEventListener('message', (e) => { ev.addEventListener('message', (e) => {
try { try {