As a final implementation step, let's implement a busy indicator on our page:

1. Generate a BusyComponent component as part of the shared module with the following command:

ng generate component modules/shared/busy

2. Replace the HTML file /src/app/modules/shared/busy/busy.component.html contents with the following:

<div class="loader-container">
    <div class="loader"></div>
</div>

3. Replace the CSS file /src/app/modules/shared/busy/busy.component.css contents with the following:

.loader-container {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: azure;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

4. Export the component in SharedModule as follows:

…
@NgModule({
  …
  exports: [
    …
    BusyComponent,
  ],
})
export class SharedModule { }

5. Import SharedModule into MarketModule:

…
import { SharedModule } from '../shared/shared.module';
…
@NgModule({
  imports: [
    …
    SharedModule,
  ],
  …
})
export class MarketModule { }

6. Include the busy component in ProductsPageComponent while making HTTP calls using the following code:

...
export class ProductsPageComponent implements OnInit {
  ...
  isBusy = false;
 
  ...
  async ngOnInit() {
    this.isBusy = true;
 
    try {
      this.categories = await this.categoriesService.loadCategories();
    } finally {
      this.isBusy = false;
    }
  }
 
  async onCategoryChanged(category: Category) {
    this.selectedCategory = category;
    this.isBusy = true;
 
    try {
      this.products = await this.productsService.loadProducts(category.name);
    } finally {
      this.isBusy = false;
    }
  }
}

That's it! You have just completed creating the busy indicator, and with that, the page functionality in this chapter is complete.