Show loading percentage in react

Hi I implemented a loader in react as shown below.

ReactDOM.render(
  "loaded",
  document.getElementById("root")
);

body,
#root {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #36364b;
  height: -webkit-fill-available;
}

<div id="root">
  <img src="https://samherbert.net/svg-loaders/svg-loaders/ball-triangle.svg" class="loader" alt="loader">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

This does show loading when it is loading. It can be checked by disabling cache on chrome developer tools and reloading.

I want to show the percent loaded for the script files. How can this be implemented?

Solution

The only method for getting the exact load percentage is use XHR (AJAX), but this is not possible for your case. The method is load scripts files with AJAX and then inyect the loaded code into the DOM. Using XHR you can use something like described in here: Can onprogress functionality be added to jQuery.ajax() by using xhrFields? However because the scripts are in a CDN, a different domain, you will have problems caused by the CORS / cross-site protections. Or your CDN allows to load contents specifically from your domain (or any domain) or you cannot do in that way. See more in Understanding CORS

The other more inexact way is estimate the total percentage from the loaded files vs pending to load files (but not knowing which percentage of each file is loaded. You delay the script loading from the CDN, start your own "load management" script and then inyect in the dom the tags one by one (using something like described in Append <Script> Tag to Body? or in Loading scripts after page load?), waiting to the window load (onload) events.

This way you are going to know how is going the loading process, but roghly, so with that info you can draw a smoothed animation with a progress bar.

But beware: this will probably impact negatively on your load times because loading one by one the script files is usually slower than loading all at once (so the browser can manage the script loading process, usually paralellizing loadings).

Load bars are used usually on heavy dutty pages which load lots of resources which are usually on the same domain or at least domains that you own so you can setup CORS succesufully to let XHR (AJAX) loading processes from same or different domains. See more info here How does Access-Control-Allow-Origin header work? however this does not apply for your case as long as you cannot modify the CDN servers. If the servers allow CORS, you are lucky, if not, you probably cannot do anything.