Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 5x 5x 4x 4x 4x 4x 4x 4x 5x 5x 5x 5x 5x 5x 4x 4x 5x 5x 5x 1x | <!-- src/components/app -->
<template>
<v-overlay
:model-value="visible"
persistent
opacity="0.55"
class="z-[9999]"
:content-class="'d-flex align-center justify-center w-100 h-100'"
>
<div class="d-flex flex-column align-center">
<v-progress-circular indeterminate size="56" />
<div class="mt-2 text-body-2">{{ t('ui.component.app.loading.nowLoading') }}</div>
</div>
</v-overlay>
</template>
<script setup lang="ts">
// region Dependency Injection
import { useI18n } from 'vue-i18n'
import {storeToRefs} from 'pinia'
import {ref, watch} from 'vue'
import {useLoadingStore} from '@/stores/loading'
// endregion Dependency Injection
// region Component Injection
// endregion Component Injection
// region interface
// endregion interface
// region constants
const { t } = useI18n()
const loading = useLoadingStore()
const { isLoading } = storeToRefs(loading)
// endregion constants
// region props
// endregion props
// region variable
// endregion variable
// region properties
const SHOW_DELAY_MS = 0
const MIN_VISIBLE_MS = 800
const visible = ref(false)
let showTimer: number | null = null
let hideTimer: number | null = null
let shownAt = 0
// endregion properties
// region emits
// endregion emits
// region validator
// endregion validator
// region methods
watch(isLoading, (now) => {
if (now) {
if (hideTimer) { clearTimeout(hideTimer); hideTimer = null }
if (!visible.value && showTimer == null) {
showTimer = window.setTimeout(() => {
visible.value = true
shownAt = Date.now()
showTimer = null
}, SHOW_DELAY_MS)
}
} else {
if (showTimer) { clearTimeout(showTimer); showTimer = null }
if (visible.value) {
const elapsed = Date.now() - shownAt
const rest = Math.max(0, MIN_VISIBLE_MS - elapsed)
hideTimer = window.setTimeout(() => {
visible.value = false
hideTimer = null
}, rest)
}
}
})
// endregion methods
// region export
// endregion export
</script>
<style scoped>
:deep(.v-overlay__content) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>
|