From 015a9d7ed8addb3c774b6e3926cce961d02c91fa Mon Sep 17 00:00:00 2001 From: Rob Bond Date: Sun, 10 May 2026 20:15:41 +0100 Subject: [PATCH] fix: force paint before API call so status feedback is visible - requestAnimationFrame flush lets React paint the "Stopping..." message before the async API call begins - Lists never go empty thanks to fallbackData on all SWR hooks - State synced on success to keep summary counts in sync Co-Authored-By: Claude Opus 4.7 --- src/components/Dashboard.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js index 8e17920..cde13ec 100644 --- a/src/components/Dashboard.js +++ b/src/components/Dashboard.js @@ -36,6 +36,8 @@ export default function Dashboard() { const label = action.charAt(0).toUpperCase() + action.slice(1); const kind = type === 'qemu' ? 'VM' : 'LXC'; setPowerActionStatus({ text: `${label}ing ${kind} ${vmid}...`, type: 'pending' }); + // Flush the pending status so it paints before the API call + await new Promise((r) => requestAnimationFrame(r)); try { await axios.post('/api/power', { node, vmid, type, action }); @@ -47,7 +49,6 @@ export default function Dashboard() { axios.get('/api/status'), ]); setPowerActionStatus({ text: `${label} successful`, type: 'success' }); - // Update local state so summary counts stay in sync until poll setNodes(nodesRes.data.data); setVms(vmsRes.data.data); setLxc(lxcRes.data.data);