Event loading sample code for Vue Composition Api

use-event-loading.ts

import { ref } from '@vue/composition-api'

function logDuration<T extends (...args: any[]) => any> (func: T): (...funcArgs: Parameters<T>) => Promise<ReturnType<T>> {
  const funcName = func.name
  return async (...args: Parameters<T>): Promise<ReturnType<T>> => {
    console.time(funcName)
    const results = await func(...args)
    console.timeEnd(funcName)
    return results
  }
}

export function useEventLoading<T extends (...args: any[]) => any> (func: T) {
  const eventLoading = ref(false)

  const eventCall = async (...args: Parameters<T>): Promise<ReturnType<T>> => {
    eventLoading.value = true
    const results = await logDuration(func)(...args)
    eventLoading.value = false
    return results
  }

  return { eventLoading, eventCall }
}

UseEventLoadingSample.vue

<template>
  <section class="main">
    <v-overlay :value="eventLoading">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
    <v-btn @click="handleSubmit">SUBMIT</v-btn>
  </section>
</template>

<script lang="ts">
import { useEventLoading } from '@/composables/use-event-loading'
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
  name: 'Sample',
  setup () {
    const {
      myGreateApi
    } = useApiSerivce()
    const {
      eventLoading,
      eventCall
    } = useEventLoading(async function myGreateApiCallFunc () {
      await myGreateApi()
    })
    const handleSubmit = async () => {
      return await eventCall()
    }
    return {
      eventLoading,
      handleSubmit
    }
  }
})
</script>