48 lines
916 B
Vue
48 lines
916 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
isLoading?: boolean
|
|
}
|
|
|
|
const isLoading = ref(true)
|
|
|
|
const router = useRouter()
|
|
|
|
// 페이지 전환 감지 및 로딩 상태 관리
|
|
if (import.meta.client) {
|
|
router.beforeEach((to, from) => {
|
|
if (from.path !== to.path) {
|
|
isLoading.value = true
|
|
}
|
|
})
|
|
|
|
router.afterEach(() => {
|
|
isLoading.value = false
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
isLoading.value = false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isLoading" class="spinner-wrap">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.spinner-wrap {
|
|
@apply fixed inset-0 flex items-center justify-center bg-black z-[90];
|
|
}
|
|
.spinner {
|
|
@apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
.spinner {
|
|
@apply bg-[url('/images/common/publisning_template_loader_white.png')];
|
|
}
|
|
}
|
|
</style>
|