CODEWITHSUNDEEP
angularprogress-bar
lucifer63
lucifer63

Reputation: 685

How to show a progress bar with percentage until Angular loads up initially?

There were many questions on this topic: Angular 2 Initial loading progress Show progress bar when Angular loads its files? and etc

But they are old and unanswered. So we still have the question. I know its complicated a bit, but I believe this is not impossible. We have really big bundles in dev env, like 10mb+, and many guys who visit our app via VPN suffer from white page disaster - files are being loaded slow, they have to wait for a while, and if one them fails then the page stays blank

Is there a way to track real progress of angular application initial loading process? Can we show our user a real percentage of initial loading process?

Upvotes: 1

Views: 52

Answers (2)

lucifer63
lucifer63

Reputation: 685

I found the answer following a hint from other question - https://stackoverflow.com/a/78437730/2779773

The main idea is to track resources loading process using PerformanceObserver. There are some complications:

  1. We don't need to track ALL the resources since not all of them are crucial for app initialization. In ideal world we could use bundle analyzer to collect list of critical resources and then use this list to filter resources in observer, but currently I don't see any way to accomplish this, so we can just use some regexp to filter a short amount of resources that we find critical - for angular 14 it's main, polyfills, scripts, runtime, vendor and styles. This approach needs tweaking for other versions of Angular or other frameworks
  2. In case when angular also needs lazy modules for initialization we can track them too - just add an appropriate slug to our regexp
  3. If we want to track the whole loading process we should also track sizes of files - total size and downloaded size. In order to do this we use transferSize. Cached resources have zero transferSize, so we use decodedBodySize
  4. In order to track errors we can use duration property of entry - if resource failed to load the entry will have zero duration
  5. If some critical resources failed to load then we refresh the page and hope that this time it will load successfully
  6. We don't want our user to fall into neverending page refresh abyss, so upon refresh we should somehow preserve a number of current refresh attempt - via LocalStorage or URL params, increase it with any refresh, and then prohibit page refresh if amount of refresh attempts reached a maximum
  7. Resources tracking process should be finished either upon loading all critical resources, or upon successfull app initialization. If we choose the second way we should send an appropriate event from angular to parent page, from AppComponent or from APP_INITIALIZER

Later I'll post the final code

Upvotes: 0

Sunil Kumar
Sunil Kumar

Reputation: 47

In index.html file Add your loader content under <app-root> tag.

HTML :

<app-root>
      <div class="pageLoaderMain">
          <div class="pageLoaderContent">
              <div class="loaderImage">
                 <img src="assets/loaderimage.gif">
              </div>
              <div class="loaderContent">Loading...</div>
          </div>
      </div> 
</app-root>

CSS :

.pageLoaderMain {width:100%; height:100%; z-index:99990; left:0;top:0%;color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed;  background:rgba(0,0,0,0.5);}
.pageLoaderMain .pageLoaderContent{background: none;z-index:99991; left:46%; top:50%; position:absolute; overflow:hidden; padding:5px; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; border: 0px solid #000000;}
.pageLoaderMain .loaderImage{float: none; display: block;text-align: center;}
.pageLoaderMain .loaderContent{float:left;margin:8px 2px 8px 5px; color:#fff; font-weight:300; font-size:13px;}

For Showing % with loader you can take reference from : https://medium.com/@bananicabananica/its-so-easy-with-angular-part-3-page-loader-8d4201e0f266

Upvotes: 0

Related Questions