Angular app is taking time to load a list of data — for example, from an API call — you can enhance the user experience by showing a loading spinner Example: Show Loading Spinner While Fetching Data

 

Component HTML (e.g. list.component.html)

<!-- Loading Spinner -->
<div class="text-center my-4" *ngIf="isLoading">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<!-- Data List -->
<ul class="list-group" *ngIf="!isLoading">
  <li class="list-group-item" *ngFor="let item of items">
    {{ item.name }}
  </li>
</ul>


Explanation:

*ngIf="isLoading": Only shows the spinner when isLoading is true.

text-center: Centers the spinner.

my-4: Adds vertical margin.

Make sure in your component:

isLoading = true; // Set to false after