Fix loading overlay bug

This commit is contained in:
marzban-dev
2025-04-18 13:13:13 +03:30
parent e6012c4d5c
commit 13b32b5104
+27 -18
View File
@@ -7,6 +7,16 @@ const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
default: () => false,
});
watch(
isSiteLoadingDisabled,
(nv) => {
console.log(nv);
},
{
immediate: true,
}
);
const shouldRenderLoadingOverlay = ref(true);
const isAssetLoaded = ref(false);
const criticalLoad = ref(true);
@@ -27,8 +37,8 @@ const progressStyle = computed(() => {
// methods
const onAssetLoaded = () => {
criticalLoad.value = false;
clearInterval(progressInterval.value!);
criticalLoad.value = false;
assetLoadingProgress.value = 100;
isAssetLoaded.value = true;
};
@@ -55,30 +65,29 @@ watch([assetLoadingProgress, criticalLoad], ([assetLoadingProgress, criticalLoad
// lifecycle
onMounted(() => {
isWindowScrollLocked.value = true;
if (!isSiteLoadingDisabled.value) {
isWindowScrollLocked.value = true;
const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
onAssetLoaded();
}
progressInterval.value = setInterval(() => {
assetLoadingProgress.value += Math.random() * 10;
}, 250);
gsap.to("#loading-overlay", {
opacity: 1,
});
}
const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
onAssetLoaded();
}
progressInterval.value = setInterval(() => {
assetLoadingProgress.value += Math.random() * 10;
}, 250);
gsap.to("#loading-overlay", {
opacity: 1,
});
});
</script>
<template>
<div
v-if="shouldRenderLoadingOverlay"
v-if="shouldRenderLoadingOverlay && !isSiteLoadingDisabled"
id="loading-overlay"
class="fixed inset-0 size-full z-9999 flex-center bg-black"
>