44 lines
1.0 KiB
Vue
44 lines
1.0 KiB
Vue
<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>
|