43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useEffect } from 'react'
|
||
|
|
import { useRouter } from 'next/navigation'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Invisible client component that periodically calls router.refresh()
|
||
|
|
* to re-fetch server component data without a full page reload.
|
||
|
|
* Pauses when the tab is hidden to avoid unnecessary requests.
|
||
|
|
*/
|
||
|
|
export function AutoRefresh({ intervalMs = 30_000 }: { intervalMs?: number }) {
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let timer: ReturnType<typeof setInterval>
|
||
|
|
|
||
|
|
function start() {
|
||
|
|
timer = setInterval(() => {
|
||
|
|
router.refresh()
|
||
|
|
}, intervalMs)
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleVisibility() {
|
||
|
|
clearInterval(timer)
|
||
|
|
if (document.visibilityState === 'visible') {
|
||
|
|
// Refresh immediately when tab becomes visible again
|
||
|
|
router.refresh()
|
||
|
|
start()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
start()
|
||
|
|
document.addEventListener('visibilitychange', handleVisibility)
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
clearInterval(timer)
|
||
|
|
document.removeEventListener('visibilitychange', handleVisibility)
|
||
|
|
}
|
||
|
|
}, [router, intervalMs])
|
||
|
|
|
||
|
|
return null
|
||
|
|
}
|