I want to have a loading screen before data is loaded. my data is collect from ngOnInIt and i want to make sure that the page will only show after data is loaded.

@if (!(dataReady$ | async)) {
  <div class="spinner-overlay">
    <app-loader/>
  </div>
}
<hr>
<div>
  <h1>something</h1>
  <p>secondthing</p>
</div>

  protected dataReady$ = new BehaviorSubject(false);
  protected amountChange = signal(DetailsService.name);

I try setting a boolean inside the ngOnInIt but would not help as the HTML load first.