How to have loading screen before data is loaded

I want to have a loading screen before data is loaded. My data is collected 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 tried setting a boolean inside ngOnInit, but it did not help as the HTML loads first.

Continue reading...