Suspense with useTransition hook

[xsfunc]

In each page I use Suspense with fallback for lazy loading.

const Page = lazy(() => import('./ui'))

export const SomePage = () => (
  <Suspense fallback={<Loading />}>
    <Page />
  </Suspense>
)

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

export const Loading = () => {
  useEffect(() => {
    nprogress.start()
    return () => {
      nprogress.done()
    }
  }, [])

  return null
}

It works good. When I go to some page I see progressbar while page loading. But I see only progress bar. And for good UX, it is sometimes better to show the “old” UI while the new UI is being prepared.

It's now possible with startTransition. You can read more about this case here.

I read source of atomic-react-router, but my expertise was not enough to implement this feature. Maybe you know how to do it.

[Kelin2025]

Cool, thanks for the info We probably need to think about adding it to the core, to make it available not only for react