refac

src/routes/+layout.svelte

@@ -109,8 +109,11 @@
 	let syncStatsEventData = null;
 
 	let heartbeatInterval = null;
+	let disconnectToastTimer = null;
+	let disconnectWarningShown = false;
 
 	const BREAKPOINT = 768;
+	const DISCONNECT_TOAST_DELAY_MS = 2000;
 
 	const setupSocket = async (enableWebsocket) => {
 		const _socket = io(`${WEBUI_BASE_URL}` || undefined, {
@@ -133,9 +136,19 @@
 		_socket.on('connect', async () => {
 			console.log('connected', _socket.id);
 
+			// Cancel any pending disconnect toast if we reconnected quickly
+			if (disconnectToastTimer) {
+				clearTimeout(disconnectToastTimer);
+				disconnectToastTimer = null;
+			}
+
 			if (hasConnectedOnce) {
 				socketConnected.set(true);
-				toast.success($i18n.t('Reconnected'));
+				// Only show "Reconnected" if the user actually saw the disconnect warning
+				if (disconnectWarningShown) {
+					toast.success($i18n.t('Reconnected'));
+					disconnectWarningShown = false;
+				}
 			}
 			hasConnectedOnce = true;
 
@@ -193,7 +206,18 @@
 		_socket.on('disconnect', (reason, details) => {
 			console.log(`Socket ${_socket.id} disconnected due to ${reason}`);
 			socketConnected.set(false);
-			toast.warning($i18n.t('Connection lost. Reconnecting...'));
+
+			// Delay showing the disconnect toast so brief interruptions
+			// (e.g. mobile tab backgrounding) don't flash a nuisance warning
+			if (disconnectToastTimer) {
+				clearTimeout(disconnectToastTimer);
+			}
+			disconnectWarningShown = false;
+			disconnectToastTimer = setTimeout(() => {
+				disconnectToastTimer = null;
+				disconnectWarningShown = true;
+				toast.warning($i18n.t('Connection lost. Reconnecting...'));
+			}, DISCONNECT_TOAST_DELAY_MS);
 
 			if (heartbeatInterval) {
 				clearInterval(heartbeatInterval);