src/components/hooks/useDelayedLoading.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import React from 'react'

export function useDelayedLoading(delay: number, initialState: boolean = true) {
  const [isLoading, setIsLoading] = React.useState(initialState)

  React.useEffect(() => {
    let timeout: NodeJS.Timeout
    // on initial load, show a loading spinner for a hot sec to prevent flash
    if (isLoading) timeout = setTimeout(() => setIsLoading(false), delay)

    return () => timeout && clearTimeout(timeout)
  }, [isLoading, delay])

  return isLoading
}