lazy Component

DOMContentLoadedWrapper.tsx

import type { FC, ReactElement } from 'react'
import { useEffect, useState } from 'react'

interface DomContentInterface {
  children: ReactElement<any, any> | null
}

const DOMContentLoadedWrapper: FC<DomContentInterface> = ({ children }) => {
  const [isReady, setIsReady] = useState(false)

  useEffect(() => {
    const handleDOMContentLoaded = () => {
      setIsReady(true)
    }

    if (document.readyState === 'complete') {
      setIsReady(true)
    } else {
      document.addEventListener('DOMContentLoaded', handleDOMContentLoaded)
    }

    return () => {
      document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded)
    }
  }, [])

  if (!children) {
    return <></>
  }

  return isReady ? children : <></>
}

export default DOMContentLoadedWrapper