poller.tsx

import { useRevalidator } from '@remix-run/react'
import { useEffect } from 'react'

// Rendering will ensure all page loaders are revalidated according to a given
// frequency
export const Poller = ({ seconds }) => {
  usePolling(seconds)

  return null
}

const usePolling = (seconds: number) => {
  const revalidator = useRevalidator()

  useEffect(() => {
    const interval = setInterval(() => {
      if (revalidator.state === 'idle') {
        console.log('Revalidating page...')
        revalidator.revalidate()
      }
    }, seconds * 1000)

    return () => clearInterval(interval)
  }, [revalidator, seconds])
}