medium-article-common-loading-practice-2.vue

<template>
  ...
  <Spinner :status="isLoading" />
  ...
</template>

<script setup lang="ts">
  // imports ...

  const isLoading = ref<boolean>(false);
  const products = ref<IProduct[]>([]);
  const cart = ref<ICartItem[]>([]);
  
  const getProducts = async () => {
    isLoading.value = true;
    
    products.value = await productsService.getProducts();
    
    isLoading.value = false;
  };
  
  const getCart = async () => {
    isLoading.value = true;
    
    cart.value = await cartService.getCartItems();
    
    isLoading.value = false;
  };
  
  getProducts();
  getCart();
</script>