import { lazy, useLazy } from '@suspensive/react'

const Page1 = lazy(() => import('...'))

const Example = () => {
  return (
    <>
      <nav>
        <NavItemToPageIndex />
        <NavItemToPage1 />
      </nav>
      <Routes>
        <Route index element={...} />
        <Route path="page1" element={<Suspense fallback='loading...'><Page1 /></Suspense>} />
      </Routes>
    </>
  )
}

const NavItemToPage1 = () => {
  const lazyPage1 = useLazy(Page1) // ✅ I wanna track state of loading for lazy component in outside of Suspense
  return (
    <Link onMouseEnter={() => lazyPage1.load()} to='/page1'>
      to Page1 {lazyPage1.isLoading ? 'loading...' : lazyPage1.isLoaded 'loaded' : 'not loaded'}
    </Link>
  )
}