Initial commit

app/src/plugins/w/loadable/_components/w-loadable.vue

@@ -0,0 +1,53 @@
+<template>
+	<div>
+		<div v-if="!content"></div>
+		<div v-else-if="content?.error">{{ content.error }}</div>
+		<div v-else-if="(typeof content == 'array' && !array.length) || (typeof content == 'object' && !Object.values(content).length)">{{ emptyMessage }}</div>
+		<slot v-else></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		content: {
+			type: [Object, Array, Boolean],
+			default: null,
+		},
+
+		emptyMessage: {
+			type: String,
+			default: 'No items'
+		}
+	},
+	data() {
+		return {
+			loader: null
+		}
+	},
+	
+
+	created() {
+		this.startLoading()
+	},
+
+	methods: {
+		async startLoading() {
+			if (!this.content)
+				this.loader = await this.$loading.show()
+		}
+	},
+
+	watch: {
+		content(newValue) {
+			if (newValue)
+				this.loader.hide()
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+div
+	height: calc( 100vh - 329px )
+</style>