Finally, implement a Busy indicator in the page by taking the following steps:

1. Implement the Busy component:
   1. Create the file /src/components/common/Busy.vue
   2. Write the following code:

<template>
  <div class="loader-container">
    <div class="loader"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Busy',
}
</script>
 
<style scoped>
.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); }
}
</style>

2. Modify the ProductsPage component:
   1. Add the busy dataset to false as the default starting state
   2. Change the busy state when the loading data is initiated and completed
   3. Import and render the Busy component when the busy data is true, as shown in the following code:

<template>
  <div>
    <CategoryMenu
      :categories="categories"
      @category-changed="onCategoryChanged"
    />
    <ProductList :products="products" />
    <Busy v-if="busy" />
  </div>
</template>
 
<script>
import MarketService from '../../services/marketService';
import CategoryMenu from './CategoryMenu.vue';
import ProductList from './ProductList.vue';
import Busy from '../common/Busy.vue';
 
export default {
  name: 'ProductsPage',
  components: {
    CategoryMenu,
    ProductList,
    Busy,
  },
  data: () => ({
    categories: [],
    products: [],
    busy: false,
  }),
  async created() {
    this.busy = true;
    try {
      this.categories = await MarketService.loadCategories();
    } finally {
      this.busy = false;
    }
  },
  methods: {
    onCategoryChanged: async function(category) {
      this.busy = true;
      try {
        this.products = await MarketService.loadProducts(category.name);
      } finally {
        this.busy = false;
      }
    },
  },
}
</script>

Congratulations! You have just completed the Busy indicator, and with that, the page functionality in this chapter.