[SOLVED] Angular 12 SSR | Header Footer shows before the loader comes

Angular 12 SSR | Header Footer shows before the loader comes

I'm using Angular 12 SSR (Server Side Rendering). The problem with my project is that it shows the Header Footer components on hard reload. Whereas, it should show the loader first and then the whole Header Footer and Router Outlet.

Here's my app.component.html

<app-loader></app-loader>
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

The loader class shows when the HTTP calls starts and hides when all the HTTP requests are responded.

Please let me know if someone else faced the same issue and got a solution to resolve this.

Thanks in advance!

Solution

[SOLVED]

I was able to achieve my expected output by making changes in the app.component.html and index.html

My index.html looks like this now:

<body>
   <div class="loader">
     <img src="/assets/images/loader.gif" alt="Loading..." />
   </div>
   <app-root> </app-root>
   <noscript>
     Please enable JavaScript to continue using this application.
   </noscript>
</body>

and app.component.html like this:

<app-header *ngIf="isLoaded"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="isLoaded"></app-footer>