blank.vue
1.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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>