Menu
I've tried my best to bring the bundle size of Angular 2 down and have been relatively successful in reducing the size to ~300kb (Angular 2 + jquery + bootstrap + some other small third party libraries) using Browserify+Rollup+Minify+GZIP but even with this size, it still takes a while to download the bundle and then there's the initial loading time for reflect and zone.js to take into consideration, meaning it can take up to 4-5 seconds on slower devices (mobile phones) to load up the site.
Whilst I understand that this is unavoidable (for now at least), is there a way to show the loading progress for the initial load in terms of percentage of download + reflect/zone.js initialization?
Most of the examples out there are like this:
<body>
<my-app>Loading...</my-app>
</body>
Which is working and the Loading... can be replaced by a spinner or whatever custom template one might choose but is there any way to get the actual progress in a meaningful way?
What I'm looking for is something like Gmail's loading progress which is an actual progress bar with min/max and not some indeterminate spinner so that users can have some form of indication as to how long they will need to wait for the site to load.
Many thanks in advance,
Update (24-Oct-2016)
I have started using NGC for ahead-of-time compiling (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) which has sped things up quite a bit (albeit bundle size has increased to ~500kb zipped) but it still takes ~300ms to load the website after everything has been downloaded.
Ideally, I would like to be able to intercept both the download and the loading process, investigate their status (for instance, 230kb/500kb downloaded or 10% of module building complete) and then load a progress bar and a status bar that actually gives some indication to the user what exactly they're waiting for.
What I currently have is to load a minimum CSS for a progress bar, show it and then load all the angular things in order on the onLoad function and whilst it's a lot smoother than before, it's still not obvious how long the user will have to wait - be that half a second to a few seconds depending on the internet connection and the device's capabilities.
510
I am not sure about reflect/zone.js, but for download we can follow this
<body onload="showApp()">
<div class="progress-bar" id="loadingContainer"></div>
<my-app style="display: none"><my-app>
</body>
showApp() {
document.getElementById('loadingContainer').style.display = "none";
document.getElementsByTagName('my-app')[0].style.display = null;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
