Angular - 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

If i understand correctly what are you trying to achieve, you should check on app.component if APP_INITIALIZER is done. The ApplicationInitStatus expose status of APP_INITIALIZER which you can check using donePromise.

So i will get Injection Token in app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent implements AfterViewInit, OnInit {

  constructor(
    @Inject(APP_INITIALIZER) public appInit: ApplicationInitStatus
  ) { ... }

  ngOnInit () {...}
}

And in app.component.html check if APP_INITIALIZER is done using donePromise and async pipe:

<ng-container *ngIf="!(appInit.donePromise | async)"> Loading... </ng-container>

Answer 2

Below worked for me:

<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>