feat(web): auto fresh every 5 seconds for workflow display

2024-01-06 01:53:21 +08:00
parent 825c8a63fb
commit 3c4bce630e
6 changed files with 81 additions and 10 deletions
@@ -0,0 +1,41 @@
+"use client";
+
+import { LoadingIcon } from "@/components/LoadingIcon";
+import { useRouter } from "next/navigation";
+import { useEffect, useTransition } from "react";
+
+export function RouteRefresher(props: { interval: number }) {
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    const refresh = () => {
+      console.log("refreshing");
+
+      startTransition(() => {
+        router.refresh();
+      });
+      timeout = setTimeout(refresh, props.interval);
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        clearTimeout(timeout);
+      } else {
+        refresh();
+      }
+    };
+
+    window.addEventListener("visibilitychange", handleVisibilityChange);
+    refresh();
+
+    return () => {
+      clearTimeout(timeout);
+      window.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [props.interval, router]);
+
+  return <div>{isPending && <LoadingIcon />}</div>;
+}