<template>
    <!-- Loader Container -->
    <div v-if="isLoading" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-50">
      <!-- Loader Spinner -->
      <div class="w-16 h-16 border-t-4 border-blue-500 border-solid rounded-full animate-spin"></div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // Props to control loader visibility
  const props = defineProps({
    isLoading: {
      type: Boolean,
      required: true
    }
  })
  </script>
  
  <style scoped>
  /* Styling for the loader spinner */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  div {
    animation: spin 1s linear infinite;
  }
  </style>
  