first commit

resources/js/layouts/blank.vue

@@ -0,0 +1,43 @@
+<script setup>
+const { injectSkinClasses } = useSkins()
+
+// ℹ️ This will inject classes in body tag for accurate styling
+injectSkinClasses()
+
+// SECTION: Loading Indicator
+const isFallbackStateActive = ref(false)
+const refLoadingIndicator = ref(null)
+
+watch([
+  isFallbackStateActive,
+  refLoadingIndicator,
+], () => {
+  if (isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.fallbackHandle()
+  if (!isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.resolveHandle()
+}, { immediate: true })
+// !SECTION
+</script>
+
+<template>
+  <AppLoadingIndicator ref="refLoadingIndicator" />
+
+  <div class="layout-wrapper layout-blank">
+    <RouterView #="{Component}">
+      <Suspense
+        :timeout="0"
+        @fallback="isFallbackStateActive = true"
+        @resolve="isFallbackStateActive = false"
+      >
+        <Component :is="Component" />
+      </Suspense>
+    </RouterView>
+  </div>
+</template>
+
+<style>
+.layout-wrapper.layout-blank {
+  flex-direction: column;
+}
+</style>