Lazy load contexts

[cakir-enes]

Any other route than landing page requires same context as parent and since context is too large I want to load it lazily.

This is what I do

function RootComponent() {
  const Providers = React.lazy(() => import('./providers/withproviders'))
  const path = useRouterState({ select: state => state.location.pathname })

  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <div>
          {path}
        </div>
        {path !== "/" ? <Providers><Outlet /></Providers> : <Outlet />}
      </Suspense>
    </>
  )
}

const landingRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: LandingPage,
})

const dashboardRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: lazyRouteComponent(() => import('./pages/dashboard')),
})

const appRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/app',
  component: lazyRouteComponent(() => import('./pages/app')),
})

But between dashboard and app pages there is glitch of Loading... fallback which is very annoying. How to handle this best? Basically my goal is to load Providers after user navigates out of landing page and share that same context between different pages (its stateful in a way local storage cant help)