Fallback for nested lazy loading?

[tal-rofe]

The usage in this repository is good for root level routes only.
If there are some nested routes (which are also lazy loaded..),
then the fallback value for React.Suspense will be only the nested lazy loaded "page", and that will make a bad UI for the fallback.

Assume you have a lazy loaded component X with some navbar element. Then, you configure in this component X an <Outlet />. Then, if the future-injected <Outlet> element will be lazy loaded as well, the root <React.Suspense> will be loaded with partial fallback element, as the fallback element will be the content of the <Outlet>, but the real "page" includes also the navbar, which won't be shown in the fallback state.

Is there a way to overcome it?

[trandinhhiep789]

The usage in this repository is good for root level routes only. If there are some nested routes (which are also lazy loaded..), then the fallback value for React.Suspense will be only the nested lazy loaded "page", and that will make a bad UI for the fallback.

Assume you have a lazy loaded component X with some navbar element. Then, you configure in this component X an <Outlet />. Then, if the future-injected <Outlet> element will be lazy loaded as well, the root <React.Suspense> will be loaded with partial fallback element, as the fallback element will be the content of the <Outlet>, but the real "page" includes also the navbar, which won't be shown in the fallback state.

Is there a way to overcome i

Hi tal-rofe, Have you solved this problem yet?

[tal-rofe]

@trandinhhiep789 Yes I have an open source project where I solved it. You can see it in Exlint/dashboard repository in my profile: https://github.com/Exlint/dashboard/blob/main/apps/frontend/src/App.router.tsx