Fix loading overlay bug
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user