Fix: Eliminar parpadeo de interfaz
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 28s
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:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user