Simple demo here: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview (I used the official angular.io/docs demo app)
The problem is: the first screen loader (I used loader.svg) animation freezes for a second during the initial loading of Angular App
The process goes like this: open the page, svg loader animation starts -> loader animation freezes -> loader animation re-starts -> angular app finish loading, loader hided
In this demo, the freeze is more obvious: http://iarouse.com/dist-angular2-material/v1/
<my-app>
<!-- the loader -->
<div id="loader-container"></div>
</my-app>
My real app is larger, and the initial loader animation freezes for a few seconds during bootstrap process, which is frustrating
Any thing I can do to make it smooth?
I had your problem because I was rendering a gif spinner image. I tried the solution posted by @bviale and it worked.
Simply used the code founded in https://www.w3schools.com/howto/howto_css_loader.asp and putted between the app-root tag.
Using Demo: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview
If I put below script in the end after ends then i see loader playing smoothly without interruption, because is see lots of errors on console.
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
error sample I am talking about:
GET https://unpkg.com/core-js@3.6.5/client/shim.min.js net::ERR_ABORTED 404
And after moving script after body, your index.html looks like below:
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Angular Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfills -->
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>
<div id="loader-container"></div>
</my-app>
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
</body>
</html>