From 8b2c6aa8a9def267647e23a189230439c711cc2d Mon Sep 17 00:00:00 2001
From: Rob Rogers <robrogers@zoominternet.net>
Date: Thu, 22 Jan 2026 15:44:23 -0500
Subject: [PATCH 1/2] 30 second refresh on error

---
 .../src/lib/components/elements/error-element.svelte | 12 +++++++-----
 .../src/lib/components/home-page/home-page.svelte    |  8 ++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/immichFrame.Web/src/lib/components/elements/error-element.svelte b/immichFrame.Web/src/lib/components/elements/error-element.svelte
index 887aa37a..a9d7f822 100644
--- a/immichFrame.Web/src/lib/components/elements/error-element.svelte
+++ b/immichFrame.Web/src/lib/components/elements/error-element.svelte
@@ -13,6 +13,7 @@
 	}
 
 	let { message = '', authError: authError = false }: Props = $props();
+	let retryMessage = $derived(!authError ? "The page will automatically refresh every 30 seconds until a connection is re-established." : "");
 </script>
 
 <div
@@ -51,10 +52,11 @@
 				{message}
 			</p>
 		{:else}
-			<p>
-				Looks like your immich-server is offline or you misconfigured immichFrame, check the
-				container logs
-			</p>
-		{/if}
+            <p>{message || "Looks like your immich-server is offline or you misconfigured immichFrame."}</p>
+            
+            <p class="text-lg mt-6 opacity-60 animate-pulse">
+                {retryMessage}
+            </p>
+        {/if}
 	</div>
 </div>
diff --git a/immichFrame.Web/src/lib/components/home-page/home-page.svelte b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
index da7379d1..fa183550 100644
--- a/immichFrame.Web/src/lib/components/home-page/home-page.svelte
+++ b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
@@ -60,6 +60,7 @@
 
 	let unsubscribeRestart: () => void;
 	let unsubscribeStop: () => void;
+	let refreshInterval: number;
 
 	let cursorVisible = $state(true);
 	let timeoutId: number;
@@ -387,6 +388,12 @@
 	onMount(() => {
 		window.addEventListener('mousemove', showCursor);
 		window.addEventListener('click', showCursor);
+
+		// 30 second reload on error
+		refreshInterval = window.setInterval(() => {
+			if (error) window.location.reload();
+		}, 30000);
+
 		if ($configStore.primaryColor) {
 			document.documentElement.style.setProperty('--primary-color', $configStore.primaryColor);
 		}
@@ -418,6 +425,7 @@
 		return () => {
 			window.removeEventListener('mousemove', showCursor);
 			window.removeEventListener('click', showCursor);
+			window.clearInterval(refreshInterval);
 		};
 	});
 

From 02588223f7890fc7d0318883c338710dcff198d7 Mon Sep 17 00:00:00 2001
From: JW-CH <17313367+JW-CH@users.noreply.github.com>
Date: Sat, 31 Jan 2026 01:50:50 +0000
Subject: [PATCH 2/2] formatting & message

---
 .../components/elements/error-element.svelte  | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/immichFrame.Web/src/lib/components/elements/error-element.svelte b/immichFrame.Web/src/lib/components/elements/error-element.svelte
index a9d7f822..23c374cb 100644
--- a/immichFrame.Web/src/lib/components/elements/error-element.svelte
+++ b/immichFrame.Web/src/lib/components/elements/error-element.svelte
@@ -13,7 +13,11 @@
 	}
 
 	let { message = '', authError: authError = false }: Props = $props();
-	let retryMessage = $derived(!authError ? "The page will automatically refresh every 30 seconds until a connection is re-established." : "");
+	let retryMessage = $derived(
+		!authError
+			? 'The page will automatically refresh every 30 seconds until a connection is re-established.'
+			: ''
+	);
 </script>
 
 <div
@@ -52,11 +56,14 @@
 				{message}
 			</p>
 		{:else}
-            <p>{message || "Looks like your immich-server is offline or you misconfigured immichFrame."}</p>
-            
-            <p class="text-lg mt-6 opacity-60 animate-pulse">
-                {retryMessage}
-            </p>
-        {/if}
+			<p>
+				{message ||
+					'Looks like your immich-server is offline or you misconfigured immichFrame. Check the container logs.'}
+			</p>
+
+			<p class="text-lg mt-6 opacity-60 animate-pulse">
+				{retryMessage}
+			</p>
+		{/if}
 	</div>
 </div>