wait

Plugins to manage your loading states

TIP

This plugin has a composable for easier use, after installing it you can use useWait

Basic usage

<template>
  <MazBtn @click="submitData" :loading="wait.isLoading('DATA_SUBMITTING')">
    Submit Data
  </MazBtn>

  <div v-if="submitted">
    Data Submitted
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useWait } from 'maz-ui'

  const wait = useWait()

  const submitted = ref(false)

  function sleep(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  const submitData = async () => {
    submitted.value = false
    wait.start('DATA_SUBMITTING')

    await sleep(2000)

    submitted.value = true
    wait.stop('DATA_SUBMITTING')
  }
</script>

Install

main.ts or main.js

import { createApp } from 'vue'
import { installWait } from 'maz-ui'

const app = createApp(App)

app.use(installWait)

app.mount('#app')