Individual loading animation for each page with Next.js

user_13014396 0
Viewed 806

I want each of my pages to have different loading animations when loading. How can i achieve this?

It is not possible to put the loading component on the page component like this:

//Page component
Page.Loader = SomeLoaderComponent

//_app.tsx
const Loader = Component.Loader || DefaultLoader;

This will not work because "Component(the page)" isnt loaded/rendered yet.

I have also tried dynamic import with next.js, so that i can import the correct page based on the url, and then get the correct loader. My initial plan was to add the Loader to the page component, as shown at the first line in the code above. That does not work because I have to give an explicit path.

const getLoader = (pagePath: string): ComponentType => {
  const Loader = dynamic(() => import(pagePath));
  return Page.Loader;
};

This is stated in the Next.js docs: enter image description here

So the question is: How can I get a custom loader per page?

typescript next.js reactjs loading javascript
1 Answers

You can use Suspense and lazy to accomplish your task.

lets say you have ComponentA.js as follows

const ComponentA = () => {
   return <div>Helloooo</div>
}

You can create another component WrapperA.js file

import React, { Suspense } from 'react';

const WrapperA = React.lazy(() => import('./ComponentA'));

function WrapperA() {
   return (
     <div>
      <Suspense fallback={<div>Loading...</div>}>
         <ComponentA />
      </Suspense>
    </div>
  );
}

in the place of <div>Loading...</div> you can have any loader component you like. and export WrapperA to your routes or tab as needed.

user_58156360
Related