title: Angular 12 SSR | Header Footer shows before the loader comes
body: <p>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.</p>
  <p>Here's my <strong>app.component.html</strong></p>
  <pre><code>&lt;app-loader&gt;&lt;/app-loader&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  <p>The loader class shows when the HTTP calls starts and hides when all the HTTP requests are responded.</p>
  <p>Please let me know if someone else faced the same issue and got a solution to resolve this.</p>
  <p>Thanks in advance!</p>