title: display a pre-loader in Angular before it load first component
body: <p>I'm using <strong>Angular 6</strong>.</p>
  
  <p>My application takes a few seconds before it loads the component and that time is spent in loading resources and validating the user.</p>
  
  <p>While all this happens, my application displays a blank white page.</p>
  
  <p>I want to replace that ugly white page with a <strong>preloader</strong> that will be displayed until all background process is complete.</p>
  
  <p>For that I have added a CSS loading spinner inside the <code>index.html</code> like</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My App&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;!-- Fonts and icons --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;
      &lt;!-- Pre-loading spinner --&gt;
      &lt;!-- This code within the app-root will be wiped of once the child component is loaded --&gt;
      &lt;!-- This code will not even be shown in the source code once the child component is loaded --&gt;
      &lt;!-- We can put any code css/html/image/etc here --&gt;
  
      &lt;style&gt;
        /** CSS here. Since it will be wiped totally, 'll not cause any impact to the core stylesheet.
      &lt;/style&gt;
  
      Loading&lt;span class="d"&gt;.&lt;/span&gt;&lt;span class="d d-2"&gt;.&lt;/span&gt;&lt;span class="d d-3"&gt;.&lt;/span&gt;
    &lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this displays a page like</p>
  
  <p><a href="https://i.stack.imgur.com/ywGht.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/ywGht.gif" alt="enter image description here"></a></p>
  
  <p>But the issue is that. The first loaded component is <strong>app.component.html</strong> which has following content</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Which further loads another component <strong>admin-layout-component.html</strong> with contents </p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="sidebar" data-color="red"&gt;
      &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
    &lt;/div&gt;
    &lt;div class="main-panel"&gt;
      &lt;app-navbar&gt;&lt;/app-navbar&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As soon as <strong>app.component</strong> is loaded, the spinner content from <strong>index.html</strong> is removed and start displaying the blank page until <strong>admin-layout</strong> is loaded.</p>
  
  <p>I tried adding same styling code inside the <strong>router-outlet</strong> of <strong>app.component.html</strong> but then when the component is loaded, the contents are added along with the spinner and spinner is not removed from other pages.</p>
  
  <p><strong>How can I display the spinner on <code>app.component.html</code> as well until dashboard page is loaded.</strong></p>
  
  <p>Here is a video how it is working: <a href="https://youtu.be/RSlTi0EQHm4" rel="noreferrer">https://youtu.be/RSlTi0EQHm4</a></p>