Defer Route Transition to code split routes

[paratron]

Defer Route Transition to code split routes

[Paratron]

I would implement it like this:

import React from 'react';
import {useRoutes} from 'hookrouter';

import LoadingPlaceholder from './LoadingPlaceholder';

const Page1 = React.lazy(() => import('./page1'));
const Page2 = React.lazy(() => import('./page2'));
const Page3 = React.lazy(() => import('./page3'));

const routes = {
	'/': () => <Page1 />,
	'/about': () => <Page2 />,
	'/contact': () => <Page3 />
}

const MyApp = () => {
	const routeResult = useRoutes(routes);

	return (
		<React.Suspense fallback={LoadingPlaceholder}>
			{routeResult}
		</React.Suspense>
	);
};

Actually waiting is not in favor of the user in this case. The app would "freeze" until the next "pages" components are loaded. You should use suspense instead and actually tell the user: hey, we are loading something here.

[cevr]

Indeed but I was thinking of something like a loading bar that would appear within the previous route. Something like this

[Paratron]

Well, the call to import() returns a promise. What you could do is intercepting the navigation, show a loading bar and wait for the promise to resolve - then finalize the navigation intent.

[vermakartik]

I am having some troubles figuring out the right way of implementing it.

can you provide an example snippet ?

Well, the call to import() returns a promise. What you could do is intercepting the navigation, show a loading bar and wait for the promise to resolve - then finalize the navigation intent.