Maz-UI

useWait ​

Vue composable to manage loading states (start, stop, check) in your components, through the wait plugin and the MazFullscreenLoader

WARNING

You must install the wait plugin before using it

TIP

More info about the wait plugin in its documentation

Usage ​

Loaded

vue
<script lang="ts" setup>
import { sleep } from '@maz-ui/utils'
import { useWait } from 'maz-ui/composables'
import { onMounted } from 'vue'

const wait = useWait()

onMounted(async () => {
  wait.start('MAIN_LOADER')
  await sleep(2000)
  wait.stop('MAIN_LOADER')
})
</script>

<template>
  <MazFullscreenLoader v-if="wait.isLoading('MAIN_LOADER')">
    Loading
  </MazFullscreenLoader>
  <p v-else>
    Loaded
  </p>
</template>