[Feature]: useLazy(Comp)

[manudeli]

Package Scope

@suspensive/react

Why

I wanna track loading state in outside of Suspense, but there is no way to do it. so I wanna do like below

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>
  )
}

Possible Solution

No response

etc.

No response

[coauthors[bot]]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@manudeli	https://github.com/toss/suspensive/issues/1666#issuecomment-3104394372 https://github.com/toss/suspensive/issues/1666	2	Co-authored-by: manudeli <[email protected]>
@marshallku	https://github.com/toss/suspensive/issues/1666#issuecomment-3099983544	1	Co-authored-by: marshallku <[email protected]>

[marshallku]

Perhaps adding LazyProvider, and managing loading states could solve this problem.

And I’m curious how we can leverage these states to enhance the user experience.

[manudeli]

I'm thinking lazy preload js chunk like this