From 0ebd35f96444ff6fb19c42ccf10eac9304ddfa2d Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sat, 2 May 2026 20:50:55 +0800
Subject: [PATCH] feat(web): add 30s auto-refresh client component

---
 web/components/auto-refresh.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 web/components/auto-refresh.tsx

diff --git a/web/components/auto-refresh.tsx b/web/components/auto-refresh.tsx
new file mode 100644
index 0000000..61d60b4
--- /dev/null
+++ b/web/components/auto-refresh.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+/**
+ * Mounts a setInterval that calls router.refresh() every `intervalMs`.
+ * router.refresh() re-runs the matching Server Component fetch and
+ * patches the rendered output in — no full page reload, no flicker.
+ *
+ * Renders nothing.
+ */
+export default function AutoRefresh({
+  intervalMs = 30_000,
+}: {
+  intervalMs?: number;
+}) {
+  const router = useRouter();
+  useEffect(() => {
+    const id = setInterval(() => router.refresh(), intervalMs);
+    return () => clearInterval(id);
+  }, [router, intervalMs]);
+  return null;
+}