useEffect(() => {
  const timer = window.setTimeout(() => {
    router.get('/users', { search }, {
      replace: true,
      preserveState: true,
      only: ['users', 'filters'],
    })
  }, 300)

  return () => window.clearTimeout(timer)
}, [search])

idle
 -> intent
 -> before
 -> start
 -> progress? (upload)
 -> server
 -> success | error(validation) | exception/network failure
 -> finish
 -> idle

const [refreshing, setRefreshing] = useState(false)

function refreshProducts() {
    router.reload({
        only: ['products'],
        onStart: () => setRefreshing(true),
        onFinish: () => setRefreshing(false),
    })
}

useEffect(() => {
    const timer = window.setTimeout(() => {
        router.get(
            route('products.index'),
            { search },
            {
                only: ['products', 'filters'],
                preserveState: true,
                replace: true,
            },
        )
    }, 250)

    return () => window.clearTimeout(timer)
}, [search])

useEffect(() => {
    const durations = new Map<string, number>()

    const offStart = router.on('start', (event) => {
        durations.set(String(event.detail.visit.url), performance.now())
    })

    const offFinish = router.on('finish', (event) => {
        const key = String(event.detail.visit.url)
        const startedAt = durations.get(key)

        if (startedAt) {
            console.debug('inertia.visit', {
                url: key,
                durationMs: Math.round(performance.now() - startedAt),
            })
            durations.delete(key)
        }
    })

    return () => {
        offStart()
        offFinish()
    }
}, [])

[ ] Operation nào sở hữu loading state?
[ ] Có cleanup ở onFinish không?
[ ] Request cũ có thể overwrite interaction mới không?
[ ] Cancel có được hiểu nhầm thành server rollback không?
[ ] Mutation success có reconcile server state không?
[ ] Global instrumentation có loại dữ liệu nhạy cảm không?