Make React component load before displaying it

Question

I'm using React hooks and i want my component to actually do the entire loading before displaying it.

My current solution is currently this:

import React, {useState, useEffect} from 'react'
import Main from './Main'

export default function Container() {

     const [isLoading, setisLoading] = useState(false);

     useEffect(() => {
        setTimeout(() => setisLoading(true), 1000)
     })

return (
        <div>
           {(isLoading) ? <Main/> : <h1>I'm currently loading</h1>}
        </div>
      );
}

The issue here is that it load's for 1 second and then displays my Main.js component which takes ~2 seconds to load. I want the actually loading to be done before it displays the component.

You can never get the timeout value right. Instead use [dynamic imports](https://reactjs.org/docs/code-splitting.html) to avoid using setTimeout function. — tarzen chugh, Sep 18 '19 at 07:44
Possible duplicate of [React - Display loading screen while DOM is rendering?](https://stackoverflow.com/questions/40987309/react-display-loading-screen-while-dom-is-rendering) — Alessandro, Sep 18 '19 at 07:46
What do you mean by Main.js takes 2 seconds to load, to load what? — HMR, Sep 18 '19 at 08:05
It's a Three.js component that loads in. it take's therefore some time. — Arasto, Sep 18 '19 at 08:09

score 1 · Answer 1 · answered Sep 18 '19 at 07:44

You can try react lazy loading

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

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

score 1 · Answer 2 · answered Sep 18 '19 at 07:46

What you have is fine, you just have the loading state backwards. Set loading to true by default and then set it to false after 1000ms.

When loading is true, display your loading message, then display your component.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Main() {
  return <h1>I'm a main component</h1>;
}

export default function Container() {
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setisLoading(false), 1000);
  });

  return <div>{isLoading ? <h1>I'm currently loading</h1> : <Main />}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Container />, rootElement);

score 0 · Answer 3 · answered Sep 18 '19 at 07:44

You should set up the right variant of importing and code splitting.

The good guide and library for it you can find here: https://github.com/jamiebuilds/react-loadable

If you want to create it on your own, you can write code like that:

export default function Container() {

     const [Main, setMain] = useState(null);

     useEffect(() => {
           import('/path/to/main').then(main => setMain(main));
     }, [])

return (
        <div>
           {(isLoading) ? <Main/> : <h1>I'm currently loading</h1>}
        </div>
      );
}

This variant works both on clientside and serverside.

You also can use React.lazy, but it doesn't work with serverside rendering

Make React component load before displaying it

3 Answers3