medium-article-loading-service.vue

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

<script setup lang="ts">
  // imports ...
  import { loadingService } from '../services/_singletons.ts';

  const isMainLoaderActive = ref<boolean>(false);
  const products = ref<IProduct[]>([]);
  const cart = ref<ICartItem[]>([]);
  
  watch(
    () => loadingService.loadings,
    (newValue: Set<string>) => {
      const isThereMainLoader = Array.from(newValue).some((loading) =>
        loading.startsWith('main-loader'),
      );

      isMainLoaderActive.value = isThereMainLoader;
    },
    { deep: true },
  );
  
  const getProducts = async () => {
    loadingService.startLoading('main-loader:get-products');
    
    products.value = await productsService.getProducts();
    
    loadingService.stopLoading('main-loader:get-products');
  };
  
  const getCart = async () => {
    loadingService.startLoading('main-loader:get-cart-items');
    
    cart.value = await cartService.getCartItems();
    
    loadingService.stopLoading('main-loader:get-cart-items');
  };
  
  getProducts();
  getCart();
</script>