HanMoeHtet / route-level-code-split

Route level code splitting in react without screen flickering (React Suspense + React Router Dom + NProgress)
https://route-level-code-splitting.netlify.app/
41 stars 7 forks source link

Fallback for nested lazy loading? #4

Open tal-rofe opened 1 year ago

tal-rofe commented 1 year ago

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 commented 11 months ago

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 commented 11 months ago

@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