How to import a component later?

Issue

I'm trying to import components with a delay. I want to import the components quietly. While looking at the home page, the back components will load silently.

I tried lazy loading, but this option returned me the page every time I logged in for a longer time.

const SignUp = lazy(async () => {
 await new Promise(resolve => setTimeout(resolve, 5000));
 return import('../sign-up/sign-up').then(({ SignUp }) => ({ default: SignUp }));});

How can I solve it?

thanks.

Solution

So there are three ways to lazy load component you can check my repo here https://github.com/amansadhwani/all-features-react/tree/master/src/components/LazyLoading

/* 1)Naive lazy load */
     const Chart = lazy(() => import("./AnyComponent")); // this will load on demand when needed

 /*2) Lazy load with prefetch */
      const Chart = lazy(() => import(/* webpackPrefetch: true */ "./AnyComponent")); // this will load after everything is completed in short at the end of everything it will load

/*3) Predictive lazy load */
     const loadComponent = () => import("./AnyComponent");
     const Comp= lazy(loadComponent ); // this is something you will load as soon as someone hover's over any button you will attach event listners onFocus and onMouseEnter as shown below 

    onFocus={Comp}
    onMouseEnter={Comp}

Answered By - Aman Sadhwani