React - Display loading screen while DOM is rendering

Question

This is an example from Google Adsense application page  The loading screen displayed before the main page showed after     I don t know how to do the same thing with React because if I make loading screen rendered by React component  it doesn t display while page is loading because it has to wait for DOM rendered before   Updated   I made an example of my approach by putting screen loader in index html and remove it in React componentDidMount   lifecycle method   Example and react-loading-screen

User · Accepted Answer

This could be done by placing the loading icon in your html file (index.html for ex), so that users see the icon immediately after the html file has been loaded.

When your app finishes loading, you could simply remove that loading icon in a lifecycle hook, I usually do that in componentDidMount.

User · Answer

When your React app is massive  it really takes time for it to get up and running after the page has been loaded  Say  you mount your React part of the app to  app  Usually  this element in your index html is simply an empty div    lt div id  app  gt  lt  div gt    What you can do instead is put some styling and a bunch of images there to make it look better between page load and initial React app rendering to DOM    lt div id  app  gt     lt div class  logo  gt       lt img src   my cool examplelogo svg    gt     lt  div gt     lt div class  preload-title  gt      Hold on  it s loading     lt  div gt   lt  div gt    After the page loads  user will immediately see the original content of index html  Shortly after  when React is ready to mount the whole hierarchy of rendered components to this DOM node  user will see the actual app   Note class  not className  It s because you need to put this into your html file     If you use SSR  things are less complicated because the user will actually see the real app right after the page loads

User · Answer

The goal  When the html page is rendered  display a spinner immediately  while React loads   and hide it after React is ready    Since the spinner is rendered in pure HTML CSS  outside of the React domain   React shouldn t control the showing hiding process directly  and the implementation should be transparent to React   Solution 1 - the  empty pseudo-class  Since you render react into a DOM container -  lt div id  app  gt  lt  div gt   you can add a spinner to that container  and when react will load and render  the spinner will disappear   You can t add a DOM element  a div for example  inside the react root  since  React will replace the contents of the container as soon as ReactDOM render   is called  Even if you render null  the content would still be replaced by a comment -   lt  -- react-empty  1 -- gt   This means that if you want to display the loader while the main component mounts  data is loading  but nothing is actually rendered  a loader markup placed inside the container   lt div id  app  gt  lt div class  loader  gt  lt  div gt  lt  div gt  for example  would not work   A workaround is to add the spinner class to the react container  and use the  empty pseudo class  The spinner will be visible  as long as nothing is rendered into the container  comments don t count   As soon as react renders something other than comment  the loader will disappear   Example 1  In the example you can see a component that renders null until it s ready  The container is the loader as well -  lt div id  app  class  app  gt  lt  div gt   and the loader s class will only work if it s  empty  see comments in code     x000D   x000D  class App extends React Component   x000D    state     x000D      loading  true x000D       x000D   x000D    componentDidMount     x000D         this simulates an async action  after which the component will render the content x000D      demoAsyncCall   then      gt  this setState   loading  false      x000D      x000D     x000D    render     x000D      const   loading     this state  x000D       x000D      if loading       if your component doesn t have to wait for an async action  remove this block  x000D        return null     render null when app is not ready x000D        x000D       x000D      return   x000D         lt div gt I m the app lt  div gt  x000D          x000D      x000D    x000D   x000D  function demoAsyncCall     x000D    return new Promise  resolve    gt  setTimeout      gt  resolve    2500    x000D    x000D   x000D  ReactDOM render  x000D     lt App   gt   x000D    document getElementById  app   x000D     x000D   loader empty   x000D    position  absolute  x000D    top  calc 50  - 4em   x000D    left  calc 50  - 4em   x000D    width  6em  x000D    height  6em  x000D    border  1 1em solid rgba 0  0  0  0 2   x000D    border-left  1 1em solid  000000  x000D    border-radius  50   x000D    animation  load8 1 1s infinite linear  x000D    x000D   x000D   keyframes load8   x000D    0    x000D      transform  rotate 0deg   x000D      x000D    100    x000D      transform  rotate 360deg   x000D      x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 1 react js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 1 react-dom js  gt  lt  script gt  x000D   x000D   lt div id  app  class  loader  gt  lt  div gt   lt  -- add class loader to container -- gt  x000D   x000D   x000D    Example 2  A variation on using the  empty pseudo class to show hide a selector  is setting the spinner as a sibling element to the app container  and showing it as long as the container is empty using the adjacent sibling combinator        x000D   x000D  class App extends React Component   x000D    state     x000D      loading  true x000D       x000D   x000D    componentDidMount     x000D         this simulates an async action  after which the component will render the content x000D      demoAsyncCall   then      gt  this setState   loading  false      x000D      x000D     x000D    render     x000D      const   loading     this state  x000D       x000D      if loading       if your component doesn t have to wait for async data  remove this block  x000D        return null     render null when app is not ready x000D        x000D       x000D      return   x000D         lt div gt I m the app lt  div gt  x000D          x000D      x000D    x000D   x000D  function demoAsyncCall     x000D    return new Promise  resolve    gt  setTimeout      gt  resolve    2500    x000D    x000D   x000D  ReactDOM render  x000D     lt App   gt   x000D    document getElementById  app   x000D     x000D   app not  empty     sk-cube-grid   x000D    display  none  x000D    x000D   x000D   sk-cube-grid   x000D    width  40px  x000D    height  40px  x000D    margin  100px auto  x000D    x000D   x000D   sk-cube-grid  sk-cube   x000D    width  33   x000D    height  33   x000D    background-color   333  x000D    float  left  x000D    animation  sk-cubeGridScaleDelay 1 3s infinite ease-in-out  x000D    x000D   x000D   sk-cube-grid  sk-cube1   x000D    animation-delay  0 2s  x000D    x000D   x000D   sk-cube-grid  sk-cube2   x000D    animation-delay  0 3s  x000D    x000D   x000D   sk-cube-grid  sk-cube3   x000D    animation-delay  0 4s  x000D    x000D   x000D   sk-cube-grid  sk-cube4   x000D    animation-delay  0 1s  x000D    x000D   x000D   sk-cube-grid  sk-cube5   x000D    animation-delay  0 2s  x000D    x000D   x000D   sk-cube-grid  sk-cube6   x000D    animation-delay  0 3s  x000D    x000D   x000D   sk-cube-grid  sk-cube7   x000D    animation-delay  0s  x000D    x000D   x000D   sk-cube-grid  sk-cube8   x000D    animation-delay  0 1s  x000D    x000D   x000D   sk-cube-grid  sk-cube9   x000D    animation-delay  0 2s  x000D    x000D   x000D   keyframes sk-cubeGridScaleDelay   x000D    0   x000D    70   x000D    100    x000D      transform  scale3D 1  1  1   x000D      x000D    35    x000D      transform  scale3D 0  0  1   x000D      x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 1 react js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 1 react-dom js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   lt  -- add class loader to container -- gt  x000D   x000D   lt div class  sk-cube-grid  gt  x000D     lt div class  sk-cube sk-cube1  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube2  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube3  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube4  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube5  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube6  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube7  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube8  gt  lt  div gt  x000D     lt div class  sk-cube sk-cube9  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Solution 2 - Pass spinner  handlers  as props  To have a more fine grained control over the spinners display state  create two functions showSpinner and hideSpinner  and pass them to the root container via props  The functions can manipulate the DOM  or do whatever needed to control the spinner  In this way  React is not aware of the  outside world   nor needs to control the DOM directly  You can easily replace the functions for testing  or if you need to change the logic  and you can pass them to other components in the React tree   Example 1   x000D   x000D  const loader   document querySelector   loader    x000D   x000D     if you want to show the loader when React loads data again x000D  const showLoader        gt  loader classList remove  loader--hide    x000D   x000D  const hideLoader        gt  loader classList add  loader--hide    x000D   x000D  class App extends React Component   x000D    componentDidMount     x000D      this props hideLoader    x000D      x000D     x000D    render        x000D      return   x000D         lt div gt I m the app lt  div gt  x000D          x000D      x000D    x000D   x000D     the setTimeout simulates the time it takes react to load  and is not part of the solution x000D  setTimeout      gt   x000D       the show hide functions are passed as props x000D    ReactDOM render  x000D       lt App x000D        hideLoader  hideLoader  x000D        showLoader  showLoader   x000D          gt   x000D      document getElementById  app   x000D      x000D    1000   x000D   loader   x000D    position  absolute  x000D    top  calc 50  - 4em   x000D    left  calc 50  - 4em   x000D    width  6em  x000D    height  6em  x000D    border  1 1em solid rgba 0  0  0  0 2   x000D    border-left  1 1em solid  000000  x000D    border-radius  50   x000D    animation  load8 1 1s infinite linear  x000D    transition  opacity 0 3s  x000D    x000D   x000D   loader--hide   x000D    opacity  0  x000D    x000D   x000D   keyframes load8   x000D    0    x000D      transform  rotate 0deg   x000D      x000D    100    x000D      transform  rotate 360deg   x000D      x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 1 react js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 1 react-dom js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   x000D   lt div class  loader  gt  lt  div gt  x000D   x000D   x000D    Example 2 - hooks  This example uses the useEffect hook to hide the spinner after the component mounts    x000D   x000D  const   useEffect     React  x000D   x000D  const loader   document querySelector   loader    x000D   x000D     if you want to show the loader when React loads data again x000D  const showLoader        gt  loader classList remove  loader--hide    x000D   x000D  const hideLoader        gt  loader classList add  loader--hide    x000D   x000D  const App      hideLoader      gt    x000D    useEffect hideLoader       x000D     x000D    return   x000D       lt div gt I m the app lt  div gt  x000D        x000D    x000D   x000D     the setTimeout simulates the time it takes react to load  and is not part of the solution x000D  setTimeout      gt   x000D       the show hide functions are passed as props x000D    ReactDOM render  x000D       lt App x000D        hideLoader  hideLoader  x000D        showLoader  showLoader   x000D          gt   x000D      document getElementById  app   x000D      x000D    1000   x000D   loader   x000D    position  absolute  x000D    top  calc 50  - 4em   x000D    left  calc 50  - 4em   x000D    width  6em  x000D    height  6em  x000D    border  1 1em solid rgba 0  0  0  0 2   x000D    border-left  1 1em solid  000000  x000D    border-radius  50   x000D    animation  load8 1 1s infinite linear  x000D    transition  opacity 0 3s  x000D    x000D   x000D   loader--hide   x000D    opacity  0  x000D    x000D   x000D   keyframes load8   x000D    0    x000D      transform  rotate 0deg   x000D      x000D    100    x000D      transform  rotate 360deg   x000D      x000D    x000D   lt script crossorigin src  https   unpkg com react 16 umd react development js  gt  lt  script gt  x000D   lt script crossorigin src  https   unpkg com react-dom 16 umd react-dom development js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   x000D   lt div class  loader  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Setting the timeout in componentDidMount works but in my application I received a memory leak warning   Try something like this   constructor props        super props      this state            loading  true              componentDidMount         this timerHandle   setTimeout      gt  this setState   loading  false     3500           componentWillUnmount        if  this timerHandle          clearTimeout this timerHandle         this timerHandle   0

User · Answer

Edit your index html file location in the public folder  Copy your image to same location as index html in public folder  And then replace the part of the contents of index html containing   lt div id  root  gt   lt  div gt  tags to the below given html code    lt div id  root  gt    lt img src  logo-dark300w png  alt  Spideren  style  vertical-align  middle  position  absolute     top  50      left  50      margin-top  -100px     Half the height       margin-left  -250px     Half the width       gt    lt  div gt    Logo will now appear in the middle of the page during the loading process  And will then be replaced after a few seconds by React

User · Answer

This will happen before ReactDOM render   takes control of the root  lt div gt   I e  your App will not have been mounted up to that point   So you can add your loader in your index html file inside the root  lt div gt   And that will be visible on the screen until React takes over   You can use whatever loader element works best for you  svg with animation for example    You don t need to remove it on any lifecycle method  React will replace any children of its root  lt div gt  with your rendered  lt App  gt   as we can see in the GIF below   Example on CodeSandbox    index html   lt head gt     lt style gt       svgLoader         animation  spin 0 5s linear infinite        margin  auto             divLoader         width  100vw        height  100vh        display  flex        align-items  center        justify-content  center             keyframes spin         0    transform  rotate 0deg           100    transform  rotate 360deg              lt  style gt   lt  head gt    lt body gt     lt div id  root  gt       lt div class  divLoader  gt         lt svg class  svgLoader  viewBox  0 0 1024 1024  width  10em  height  10em  gt           lt path fill  lightblue            d  PATH FOR THE LOADER ICON            gt         lt  svg gt       lt  div gt     lt  div gt   lt  body gt     index js  Using debugger to inspect the page before ReactDOM render   runs   import React from  react   import ReactDOM from  react-dom   import    styles css    function App       return        lt div className  App  gt         lt h1 gt Hello CodeSandbox lt  h1 gt         lt h2 gt Start editing to see some magic happen  lt  h2 gt       lt  div gt          debugger     TO INSPECT THE PAGE BEFORE 1ST RENDER  const rootElement   document getElementById  root    ReactDOM render  lt App   gt   rootElement

User · Answer

The workaround for this is   In your render function do something like this   constructor         this state     isLoading  true      componentDidMount         this setState  isLoading  false      render         return          this state isLoading    showLoadingScreen     yourPage              Initialize isLoading as true in the constructor and false on componentDidMount

User · Answer

I also used  Ori Drori s answer and managed to get it to work  As your React code grows  so will the bundles compiled that the client browser will have to download on first time access  This imposes a user experience issue if you don t handle it well   What I added to  Ori answer was to add and execute the onload function in the index html on onload attribute of the body tag  so that the loader disappear after everything has been fully loaded in the browse  see the snippet below    lt html gt     lt head gt        lt style gt          loader empty             position  absolute            top  calc 50  - 4em             left  calc 50  - 4em             width  6em            height  6em            border  1 1em solid rgba 0  0  0  0 2             border-left  1 1em solid  000000            border-radius  50             animation  load8 1 1s infinite linear                     keyframes load8             0               transform  rotate 0deg                         100               transform  rotate 360deg                               lt  style gt        lt script gt         function onLoad              var loader   document getElementById  cpay loader   loader className              lt  script gt      lt  head gt      lt body onload  onLoad     gt       more html here          lt  body gt   lt  html gt

User · Answer

If anyone looking for a drop-in  zero-config and zero-dependencies library for the above use-case  try pace js  http   github hubspot com pace docs welcome      It automatically hooks to events  ajax  readyState  history pushstate  js event loop etc  and show a customizable loader    Worked well with our react relay projects  handles navigation changes using react-router  relay requests   Not affliated  had used pace js for our projects and it worked great

User · Answer

Nowadays we can use hooks as well in React 16 8   import React    useState  useEffect   from  react    const App        gt      const   spinner  setSpinner     useState true         It will be executed before rendering    useEffect      gt        setTimeout      gt  setSpinner false   1000                     means like componentDidMount    return  spinner  amp  amp   lt div gt Your content lt  div gt       export default App

User · Answer

I m using react-progress-2 npm package  which is zero-dependency and works great in ReactJS   https   github com milworm react-progress-2  Installation   npm install react-progress-2  Include react-progress-2 main css to your project   import  node modules react-progress-2 main css    Include react-progress-2 and put it somewhere in the top-component  for example   import React from  react   import Progress from  react-progress-2    var Layout   React createClass   render  function         return            lt div className  layout  gt               lt Progress Component  gt                      other components go here                 lt  div gt                         Now  whenever you need to show an indicator  just call Progress show    for example   loadFeed  function         Progress show           do your ajax thing      onLoadFeedCallback  function         Progress hide           render feed      Please note  that show and hide calls are stacked  so after n-consecutive show calls  you need to do n hide calls to hide an indicator or you can use Progress hideAll

User · Answer

You don t need that much effort  here s a basic example    lt  DOCTYPE html gt   lt html lang  en  gt    lt head gt     lt meta charset  utf-8    gt     lt link rel  shortcut icon  href   PUBLIC URL  favicon ico    gt     lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt     lt meta name  theme-color  content   000000    gt     lt meta name  description  content  Web site created using create-react-app    gt     lt link rel  apple-touch-icon  href  logo192 png    gt     lt link rel  manifest  href   PUBLIC URL  manifest json    gt     lt title gt Title lt  title gt     lt style gt      body         margin  0              loader-container         width  100vw        height  100vh        display  flex        overflow  hidden              loader         margin  auto        border  5px dotted  dadada        border-top  5px solid  3498db        border-radius  50         width  100px        height  100px        -webkit-animation  spin 2s linear infinite        animation  spin 2s linear infinite              -webkit-keyframes spin         0            -webkit-transform  rotate 0deg                  100            -webkit-transform  rotate 360deg                       keyframes spin         0            transform  rotate 0deg                  100            transform  rotate 360deg                     lt  style gt   lt  head gt    lt body gt     lt noscript gt You need to enable JavaScript to run this app  lt  noscript gt     lt div id  root  gt       lt div class  loader-container  gt         lt div class  loader  gt  lt  div gt       lt  div gt     lt  div gt   lt  body gt    lt  html gt    You can play around with HTML and CSS to make it looks like your example

User · Answer

The most important question is  what do you mean by  loading   If you are talking about the physical element being mounted  some of the first answers here are great  However  if the first thing your app does is check for authentication  what you are really loading is data from the backend whether the user passed a cookie that labels them an authorized or unauthorized user   This is based around redux  but you can do easily change it to plain react state model   action creator    export const getTodos        gt      return async dispatch   gt        let res      try         res   await axios get   todos get           dispatch           type  AUTH          auth  true                 dispatch           type  GET TODOS          todos  res data todos                 catch  e          finally         dispatch           type  LOADING          loading  false                           The finally part means whether the user is authed or not  the loading screen goes away after a response is received   Here s what a component that loads it could look like   class App extends Component     renderLayout         const         loading        auth        username        error        handleSidebarClick        handleCloseModal         this props      if  loading          return  lt Loading   gt             return                                  componentDidMount         this props getTodos                render         return this renderLayout            If state loading is truthy  we will always see a loading screen  On componentDidMount  we call our getTodos function  which is an action creator that turns state loading falsy when we get a response  which can be an error   Our component updates  calls render again  and this time there is no loading screen because of the if statement

User · Answer

What about using Pace  Use this link address here   https   github hubspot com pace docs welcome   1 On their website select the style you want and paste in index css  2 go to cdnjs Copy the link for Pace Js and add to your script tags in public index html  3 It automatically detect web loads and displays the pace at the browser Top   You can also modify the height and animation in the css also

User · Answer

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   lt  DOCTYPE html gt  x000D   lt html lang  en  xml lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1 maximum-scale 3 0  shrink-to-fit no  gt  x000D     lt meta name  theme-color  content   000000  gt  x000D     lt  -- 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      -- gt  x000D     lt link rel  manifest  href   PUBLIC URL  manifest json  gt  x000D     lt link rel  shortcut icon  href   PUBLIC URL  favicon ico  gt  x000D     lt style gt  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     lt  style gt  x000D     lt script gt  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     lt    htmlWebpackPlugin files chunks main entry   gt    x000D      req open  GET   bundleName   x000D      req send    x000D   x000D     lt  script gt  x000D     lt  -- 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      -- gt  x000D   x000D     lt title gt App Name lt  title gt  x000D     lt link href   lt    htmlWebpackPlugin files chunks main css 0    gt   rel  stylesheet  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt noscript gt  x000D      You need to enable JavaScript to run this app  x000D     lt  noscript gt  x000D     lt div id  parentDiv  class  percentage  gt  x000D       lt div id  percentage  class  innerpercentage  gt loading lt  div gt  x000D     lt  div gt  x000D     lt div id  root  gt  lt  div gt  x000D     lt  -- 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  lt body gt  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      -- gt  x000D   lt  body gt  x000D   x000D   lt  html gt  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

User · Answer

I had to deal with that problem recently and came up with a solution  which works just fine for me  However  I ve tried  Ori Drori solution above and unfortunately it didn t work just right  had some delays   I don t like the usage of setTimeout function there    This is what I came up with   index html file  Inside head tag - styles for the indicator    lt style media  screen  type  text css  gt    loading     -webkit-animation  sk-scaleout 1 0s infinite ease-in-out    animation  sk-scaleout 1 0s infinite ease-in-out    background-color  black    border-radius  100     height  6em    width  6em      container     align-items  center    background-color  white    display  flex    height  100vh    justify-content  center    width  100vw      keyframes sk-scaleout     0        -webkit-transform  scale 0       transform  scale 0         100        -webkit-transform  scale 1 0       opacity  0      transform  scale 1 0           lt  style gt    Now the body tag    lt div id  spinner  class  container  gt     lt div class  loading  gt  lt  div gt   lt  div gt    lt div id  app  gt  lt  div gt    And then comes a very simple logic  inside app js file  in the render function    const spinner   document getElementById  spinner     if  spinner  amp  amp   spinner hasAttribute  hidden        spinner setAttribute  hidden    true        How does it work    When the first component  in my app it s app js aswell in most cases  mounts correctly  the spinner is being hidden with applying hidden attribute to it    What s more important to add -   spinner hasAttribute  hidden   condition prevents to add hidden attribute to the spinner with every component mount  so actually it will be added only one time  when whole app loads

User · Answer

You can easily do that by using lazy loading in react  For that you have to use lazy and suspense from react like that  import React    lazy  Suspense   from  react    const loadable    importFunc    fallback   null       fallback  null      gt      const LazyComponent   lazy importFunc      return props   gt         lt Suspense fallback  fallback  gt         lt LazyComponent     props    gt       lt  Suspense gt           export default loadable   After that export your components like this  export const TeacherTable   loadable      gt    import     MainTables TeacherTable          fallback   lt Loading   gt          And then in your routes file use it like this    lt Route exact path  quot  app view teachers quot  component  TeacherTable    gt   Thats it now you are good to go everytime your DOM is rendering your Loading compnent will be displayed as we have specified in the fallback property above  Just make sure that you do any ajax request only in componentDidMount

User · Answer

this is my implementation  based on the answers   public index html  lt  DOCTYPE html gt   lt html lang  quot en quot  gt    lt head gt     lt title gt React App lt  title gt     lt style gt       preloader         display  flex        justify-content  center              rotate         animation  rotation 1s infinite linear              loader-hide         display  none              keyframes rotation         from           transform  rotate 0deg                  to           transform  rotate 359deg                    lt  style gt   lt  head gt    lt body gt     lt div class  quot preloader quot  gt       lt img src  quot https   i imgur com kDDFvUp png quot  class  quot rotate quot  width  quot 100 quot  height  quot 100 quot    gt     lt  div gt     lt div id  quot root quot  gt  lt  div gt   lt  body gt    lt  html gt     src app js import React    useEffect   from  quot react quot    import  quot   App css quot    const loader   document querySelector  quot  preloader quot     const showLoader        gt  loader classList remove  quot preloader quot    const addClass        gt  loader classList add  quot loader-hide quot     const App        gt      useEffect      gt        showLoader        addClass                return        lt div style    display   quot flex quot   justifyContent   quot center quot     gt         lt h2 gt App react lt  h2 gt       lt  div gt           export default App

User · Answer

I m also using React in my app  For requests I m using axios interceptors  so great way to make loader screen  fullpage as you showed an example  is to add class or id to for example body inside interceptors  here code from official documentation with some custom code       Add a request interceptor axios interceptors request use function  config           Do something before request is sent      document body classList add  custom-loader         return config       function  error           Do something with request error     return Promise reject error             Add a response interceptor axios interceptors response use function  response           Do something with response data        document body classList remove  custom-loader           return response       function  error           Do something with response error     return Promise reject error            And then just implement in CSS your loader with pseudo-elements  or add class or id to different element  not body as you like  - you can set color of background to opaque or transparent  etc    Example   custom-loader before       background   000000      content          position  fixed             custom-loader after       background   000000      content   Loading content          position  fixed      color  white

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

Examples related to reactjs

Examples related to asynchronous

Examples related to redux