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
This commit is contained in:
maziggy
2025-12-15 14:03:26 +01:00
parent f22acedc7d
commit 0bb76024fd
3 changed files with 45 additions and 36 deletions
+11 -2
View File
@@ -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 one or more lines are too long
+1 -1
View File
@@ -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>