<script setup lang="ts">
import { watch, ref } from 'vue'

const props = defineProps({
  visibility: Boolean,
})

const loaderVisibility = ref<boolean>(props.visibility)

watch(props, () => (loaderVisibility.value = props.visibility))
</script>

<template>
  <q-inner-loading :showing="loaderVisibility" class="loader">
    <q-spinner-cube size="80px" color="primary" />
  </q-inner-loading>
</template>

<style lang="sass">
.loader
    z-index: 1000
</style>
