LOGIN
Harsha Alva
92
Community Expert
Mechanical Engineer + Software Developer
 · MangaluruIndia
Share
Report
Get Link
TUTORIAL

Page loading screen in React

[Update 10/7/17] Robert Lancer raised a valid issue about content shown to users who disable JavaScript in the browser. Earlier, a spinner would be shown forever. Now, a prompt telling the user to enable JS will be shown and the spinner will be hidden.

 

Use a CSS spinner on your page till it loads completely.

  1. index.html
    Add the inline style show below to the head section and the progress spinner <div> within the root element.
<!doctype html>
<html lang="en">
  <head>
    .
    .
    .
    <style>
      body {
        background-color: #f6f6f6;
      }

      /* Center the loader */
      .page-load-progress {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        border: 10px solid #cacaca;
        border-radius: 50%;
        border-top: 10px solid #3498db;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        box-sizing: content-box !important;
      }

      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .no-script {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        padding: 20px;
        background: #f6f6f6;
      }
    </style>
  </head>
  <body>
    <noscript>
      <div class="no-script">
        You need to enable JavaScript to run this app.
      </div>
    </noscript>
    <div id="root">
      <div class="page-load-progress"></div>
    </div>
  </body>
</html>
  1. index.js
    Replace your render code with the following.
window.setTimeout(() => {
  ReactDOM.render(<App />, document.getElementById('root'));
  .
  .
  .
}, 3000);

This shows a progress spinner for 3000 ms, based purely on assumption of page load time. This works because the root element’s children are replaced by React DOM.

Robert Lancer

HTML
React.js
Contributions
Robert Lancer

Robert recognized an issue in showing a spinner when JS is disabled in the browser.

2 likes 
Like
Award Contribution
Robert Lancer
53
Community Expert
Chief Technology Officer at Collaborizm
 · New YorkU.S.
Share
Report
Get Link

I do not recommend this … Some content should be statically rendered and then React can take over once the full JS bundle is loaded. Potentially you can have a loading indicator for when the full site will be ready but at least present some core content to the user without JS.

Contribution

Robert recognized an issue in showing a spinner when JS is disabled in the browser.

Like
1 like 
Award Contribution
Leave a reply...
DISCOVER
CHAT
HIRE
ACTIVITY
FEED
New Post
Help
Start Project
Online Users
Share Link
Write something before you submit it!
Photo updated
Request Sent!
Updated
Copied to Clipboard