How to show waiting indicator while app is loading using APP_INITIALIZER?

Question

How to show waiting indicator when angular app is executing app_initializer code.

As of now I can show waiting indicator till app is loaded. But after that page stays empty till app_initializer code is complete. So I want to show some sort of waiting indicator.

<app-root>Loading....</app-root>

Also Tried

<app-root></app-root>
<div>Loading...</div>

None of these option work when app_initializer is executing.... during this time period I am calling web api to get some startup data.

Answer 1

Putting a loader inside the <app-root> element in index.html will show a loader until the app initializer has completed loading

<style>
  .loader {
    margin: 50px auto 0;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<app-root>
  <div class="loader"></div>
</app-root>