From 4da390c963ba1cfa373d4cacfbf41e06791dd132 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 24 Nov 2025 18:31:13 -0600
Subject: [PATCH] Fix: Eliminar parpadeo de interfaz

- 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
---
 frontend/src/App.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index fd23d1d..56d9de2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -51,7 +51,11 @@ async function fetchUsers() {
     const res = await fetch('/api/users');
     if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
     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) {
     if (isAuthError(error)) handleAuthError();
     else console.error('Error fetching users:', error);
@@ -76,7 +80,11 @@ async function fetchDevices() {
     const res = await fetch('/api/devices');
     if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
     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) {
     if (isAuthError(error)) handleAuthError();
     else console.error('Error fetching devices:', error);
@@ -129,7 +137,7 @@ function setupSse() {
     refreshTimer = setTimeout(async () => {
       await Promise.all([fetchUsers(), fetchDevices()]);
       refreshTimer = null;
-    }, 1000);
+    }, 3000); // Debounce de 3 segundos para evitar parpadeos
   }
   ev.addEventListener('message', (e) => {
     try {