createTimeSource: reflects to the pagevisibility

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;