Browse Source

Fix printer card flicker when disconnecting

  - Cache connected state in ref to prevent flicker when status
    briefly becomes undefined during query refetches
  - Use cached value for shouldHide calculation instead of raw status
maziggy 5 months ago
parent
commit
0bb76024fd
3 changed files with 12 additions and 3 deletions
  1. 11 2
      frontend/src/pages/PrintersPage.tsx
  2. 0 0
      static/assets/index-CFaicAOR.js
  3. 1 1
      static/index.html

+ 11 - 2
frontend/src/pages/PrintersPage.tsx

@@ -553,6 +553,15 @@ function PrinterCard({
   }, [status?.wifi_signal]);
   const wifiSignal = status?.wifi_signal ?? cachedWifiSignal;
 
+  // Cache connected state to prevent flicker when status briefly becomes undefined
+  const cachedConnected = useRef<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (status?.connected !== undefined) {
+      cachedConnected.current = status.connected;
+    }
+  }, [status?.connected]);
+  const isConnected = status?.connected ?? cachedConnected.current;
+
   // Cache ams_extruder_map to prevent L/R indicators bouncing on updates
   const cachedAmsExtruderMap = useRef<Record<string, number>>({});
   useEffect(() => {
@@ -602,8 +611,8 @@ function PrinterCard({
   });
   const lastPrint = lastPrints?.[0];
 
-  // Determine if this card should be hidden
-  const shouldHide = hideIfDisconnected && status && !status.connected;
+  // Determine if this card should be hidden (use cached connected state to prevent flicker)
+  const shouldHide = hideIfDisconnected && isConnected === false;
 
   const deleteMutation = useMutation({
     mutationFn: () => api.deletePrinter(printer.id),

File diff suppressed because it is too large
+ 0 - 0
static/assets/index-CFaicAOR.js


+ 1 - 1
static/index.html

@@ -23,7 +23,7 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-B6uuyApI.js"></script>
+    <script type="module" crossorigin src="/assets/index-CFaicAOR.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CbCN6LSA.css">
   </head>
   <body>

Some files were not shown because too many files changed in this diff