Vue loading handler component

useLoadingHandler.js

import Vue from 'vue';
import { VDialog, VCard, VCardText, VProgressLinear } from 'vuetify/lib';

export default async function useLoadingHandler(fn = () => {}, message = 'Processando requisição...') {
	let loadingView = new Vue({
		components: { VDialog, VCard, VCardText, VProgressLinear },

		data() {
			return {
				show: false
			};
		},

		render: function(h) {
			return h(
				'v-dialog',
				{
					props: {
						value: this.show,
						persistent: true,
						width: '300'
					}
				},
				[
					h('v-card', [
						h('v-card-text', [
							h('div', message),
							h('v-progress-linear', {
								props: {
									indeterminate: true,
									color: 'primary'
								},
								class: ['mb-0']
							})
						])
					])
				]
			);
		},

		mounted() {
			document.body.appendChild(this.$el);

			setTimeout(() => {
				this.show = true;
			}, 500);
		},

		beforeDestroy() {
			this.show = false;
			document.body.removeChild(this.$el);
		}
	});

	try {
		loadingView.$mount();

		await fn();
	} finally {
		loadingView.$destroy();
	}
}