[reactjs] React - Display loading screen while DOM is rendering?

The starting of react app is based on the main bundle download. React app only starts after the main bundle being downloaded in the browser. This is even true in case of lazy loading architecture. But the fact is we cannot exactly state the name of any bundles. Because webpack will add a hash value at the end of each bundle at the time when you run 'npm run build' command. Of course we can avoid that by changing hash settings, but it will seriously affect the cache data problem in the Browser. Browsers might not take the new version because of the same bundle name. . we need a webpack + js + CSS approach to handle this situation.

change the public/index.html as below

_x000D_
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en" xml:lang="en">_x000D_
_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no">_x000D_
  <meta name="theme-color" content="#000000">_x000D_
  <!--_x000D_
      manifest.json provides metadata used when your web app is added to the_x000D_
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/_x000D_
    -->_x000D_
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">_x000D_
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">_x000D_
  <style>_x000D_
 .percentage {_x000D_
      position: absolute;_x000D_
      top: 50%;_x000D_
      left: 50%;_x000D_
      width: 150px;_x000D_
      height: 150px;_x000D_
      border: 1px solid #ccc;_x000D_
      background-color: #f3f3f3;_x000D_
      -webkit-transform: translate(-50%, -50%);_x000D_
          -ms-transform: translate(-50%, -50%);_x000D_
              transform: translate(-50%, -50%);_x000D_
      border: 1.1em solid rgba(0, 0, 0, 0.2);_x000D_
      border-radius: 50%;_x000D_
      overflow: hidden;_x000D_
      display: -webkit-box;_x000D_
      display: -ms-flexbox;_x000D_
      display: flex;_x000D_
      -webkit-box-pack: center;_x000D_
          -ms-flex-pack: center;_x000D_
              justify-content: center;_x000D_
      -webkit-box-align: center;_x000D_
          -ms-flex-align: center;_x000D_
              align-items: center;_x000D_
    }_x000D_
_x000D_
    .innerpercentage {_x000D_
      font-size: 20px;_x000D_
    }_x000D_
  </style>_x000D_
  <script>_x000D_
    function showPercentage(value) {_x000D_
      document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%";_x000D_
    }_x000D_
    var req = new XMLHttpRequest();_x000D_
    req.addEventListener("progress", function (event) {_x000D_
      if (event.lengthComputable) {_x000D_
        var percentComplete = event.loaded / event.total;_x000D_
        showPercentage(percentComplete)_x000D_
        // ..._x000D_
      } else {_x000D_
        document.getElementById('percentage').innerHTML = "Loading..";_x000D_
      }_x000D_
    }, false);_x000D_
_x000D_
    // load responseText into a new script element_x000D_
    req.addEventListener("load", function (event) {_x000D_
      var e = event.target;_x000D_
      var s = document.createElement("script");_x000D_
      s.innerHTML = e.responseText;_x000D_
      document.documentElement.appendChild(s);_x000D_
      document.getElementById('parentDiv').style.display = 'none';_x000D_
_x000D_
    }, false);_x000D_
_x000D_
    var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>";_x000D_
    req.open("GET", bundleName);_x000D_
    req.send();_x000D_
_x000D_
  </script>_x000D_
  <!--_x000D_
      Notice the use of %PUBLIC_URL% in the tags above._x000D_
      It will be replaced with the URL of the `public` folder during the build._x000D_
      Only files inside the `public` folder can be referenced from the HTML._x000D_
_x000D_
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will_x000D_
      work correctly both with client-side routing and a non-root public URL._x000D_
      Learn how to configure a non-root public URL by running `npm run build`._x000D_
    -->_x000D_
_x000D_
  <title>App Name</title>_x000D_
  <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <noscript>_x000D_
    You need to enable JavaScript to run this app._x000D_
  </noscript>_x000D_
  <div id="parentDiv" class="percentage">_x000D_
    <div id="percentage" class="innerpercentage">loading</div>_x000D_
  </div>_x000D_
  <div id="root"></div>_x000D_
  <!--_x000D_
      This HTML file is a template._x000D_
      If you open it directly in the browser, you will see an empty page._x000D_
_x000D_
      You can add webfonts, meta tags, or analytics to this file._x000D_
      The build step will place the bundled scripts into the <body> tag._x000D_
_x000D_
      To begin the development, run `npm start` or `yarn start`._x000D_
      To create a production bundle, use `npm run build` or `yarn build`._x000D_
    -->_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
_x000D_
_x000D_

In your production webpack configuration change the HtmlWebpackPlugin option to below

 new HtmlWebpackPlugin({
          inject: false,
...

You may need to use 'eject' command to get the configuration file. latest webpack might have the option to configure the HtmlWebpackPlugin without ejecting project. enter image description here

Examples related to reactjs

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Template not provided using create-react-app How to resolve the error on 'react-native start' Element implicitly has an 'any' type because expression of type 'string' can't be used to index Invalid hook call. Hooks can only be called inside of the body of a function component How to style components using makeStyles and still have lifecycle methods in Material UI? React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function How to fix missing dependency warning when using useEffect React Hook? Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

Examples related to asynchronous

How to read file with async/await properly? Use Async/Await with Axios in React.js Waiting until the task finishes How to reject in async/await syntax? React - Display loading screen while DOM is rendering? angular 2 how to return data from subscribe How do I access store state in React Redux? SyntaxError: Unexpected token function - Async Await Nodejs Why does .json() return a promise? Why is setState in reactjs Async instead of Sync?

Examples related to redux

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Receiving "Attempted import error:" in react app Local package.json exists, but node_modules missing What is the best way to redirect a page using React Router? How do I fix "Expected to return a value at the end of arrow function" warning? ReactJS lifecycle method inside a function Component How to overcome the CORS issue in ReactJS Attach Authorization header for all axios requests React - Display loading screen while DOM is rendering?