diff --git a/bun.lockb b/bun.lockb
index 42d6188..72491e0 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index d4bfb92..3c10737 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@solid-primitives/i18n": "^2.1.1",
     "@solid-primitives/intersection-observer": "^2.1.6",
     "@solid-primitives/map": "^0.4.13",
+    "@solid-primitives/page-visibility": "^2.0.17",
     "@solid-primitives/resize-observer": "^2.0.26",
     "@solidjs/router": "^0.14.10",
     "@suid/icons-material": "^0.8.1",
diff --git a/src/platform/timesrc.ts b/src/platform/timesrc.ts
index d5d957a..12daee0 100644
--- a/src/platform/timesrc.ts
+++ b/src/platform/timesrc.ts
@@ -1,3 +1,4 @@
+import { usePageVisibility } from "@solid-primitives/page-visibility";
 import {
   Accessor,
   createContext,
@@ -15,19 +16,30 @@ export const TimeSourceProvider = TimeSourceContext.Provider;
 export function createTimeSource() {
   let id: ReturnType<typeof setTimeout> | undefined;
   const [get, set] = createSignal(new Date());
+  const visible = usePageVisibility();
 
-  createRenderEffect(() =>
-    untrack(() => {
-      id = setTimeout(() => {
-        set(new Date());
-      }, 30 * 1000);
-    }),
-  );
-
-  onCleanup(() => {
+  const cancelTimer = () => {
     if (typeof id !== "undefined") {
       clearInterval(id);
     }
+    id = undefined;
+  };
+
+  const resetTimer = () => {
+    cancelTimer();
+    set(new Date());
+    id = setTimeout(() => {
+      set(new Date());
+    }, 30 * 1000); // refresh rate: 30s
+  };
+
+  createRenderEffect(() => {
+    onCleanup(cancelTimer);
+    if (visible()) {
+      resetTimer();
+    } else {
+      console.debug("createTimeSource: page is invisible, cancel the timer")
+    }
   });
 
   return get;