Recreate loading overlay

frontend/components/global/LoadingOverlay.vue

@@ -1,47 +1,68 @@
 <script lang="ts" setup>
-// state
+// states
 
 const { $gsap: gsap } = useNuxtApp();
-const disableLoadingOverlay = useState("disableLoadingOverlay");
+
+const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
+    default: () => false,
+});
+
 const shouldRenderLoadingOverlay = ref(true);
+const isAssetLoaded = ref(false);
+
+const progressInterval = ref<NodeJS.Timeout | null>(null);
+const assetLoadingProgress = ref(10);
 
 const isWindowScrollLocked = useScrollLock(window);
 
-// lifecycle
+// computed
 
-onMounted(async () => {
-    const timeline = gsap.timeline();
-
-    timeline.to("#loading-overlay", {
-        opacity: 1,
-    });
-
-    isWindowScrollLocked.value = true;
-
-    const preload = (url: string) => {
-        return new Promise((resolve) => {
-            const image = new Image();
-            image.src = url;
-            image.onload = () => resolve(true);
-        });
+const progressStyle = computed(() => {
+    return {
+        width: `${assetLoadingProgress.value}%`,
     };
+});
 
-    await Promise.all([
-        preload("/img/heymlz/heymlz-fast-loading.gif"),
-        preload("/img/heymlz/heymlz-pulling.gif"),
-        preload("/img/heymlz/heymlz-falling.gif"),
-        preload("/img/heymlz/heymlz-seat.gif"),
-    ]);
+// methods
 
-    timeline.to("#loading-overlay", {
+const onAssetLoaded = () => {
+    clearInterval(progressInterval.value!);
+    assetLoadingProgress.value = 100;
+    isAssetLoaded.value = true;
+};
+
+const onAssetFinished = () => {
+    gsap.to("#loading-overlay", {
         opacity: 0,
-        delay: 5.5,
         onComplete: () => {
             shouldRenderLoadingOverlay.value = false;
             isWindowScrollLocked.value = false;
-            disableLoadingOverlay.value = true;
+            isSiteLoadingDisabled.value = true;
         },
     });
+};
+
+// lifecycle
+
+onMounted(() => {
+    isWindowScrollLocked.value = true;
+
+    if (!isSiteLoadingDisabled.value) {
+    }
+
+    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;
+    }, 500);
+
+    gsap.to("#loading-overlay", {
+        opacity: 1,
+    });
 });
 </script>
 
@@ -51,66 +72,30 @@ onMounted(async () => {
         id="loading-overlay"
         class="fixed inset-0 size-full z-9999 flex-center bg-black"
     >
-        <NuxtImg
-            id="loading-overlay-image"
-            src="/img/heymlz/heymlz-fast-loading.gif"
-            class="absolute z-20 w-[700px] brightness-75"
-            alt=""
+        <div
+            class="flex-col-center gap-6 transition-all duration-450 ease-in-out"
+            :class="isAssetLoaded ? 'opacity-0 scale-75' : 'opacity-100 scale-100'"
+        >
+            <NuxtImg src="/img/heymlz/heymlz-text-logo.png" class="invert w-[250px]" />
+            <div class="bg-slate-800 w-[400px] h-1 rounded-full overflow-hidden">
+                <div class="bg-slate-100 h-full w-full transition-all duration-250" :style="progressStyle" />
+            </div>
+        </div>
+
+        <video
+            id="heymlz-loading-animation"
+            muted
+            autoplay
+            playsinline
+            webkit-playsinline
+            @canplay="onAssetLoaded"
+            @ended="onAssetFinished"
+            src="/video/heymlz/heymlz-fast-loading.mp4"
+            class="absolute z-20 w-[700px] brightness-75 transition-all duration-[1s]"
+            :class="isAssetLoaded ? 'opacity-100' : 'opacity-0'"
+            :style="{
+                mask: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 20%, black 80%, rgba(0,0,0,0) 100%)',
+            }"
         />
-        <!-- <div
-            id="loading-overlay-gradient"
-            class="opacity-0 scale-x-0 w-[1000px] h-[70px] bg-linear-to-r from-blue-500 via-violet-500 to-purple-500 blur-[150px] rounded-[100px]"
-        /> -->
     </div>
 </template>
-
-<style>
-#loading-overlay-image {
-    animation-name: loading-overlay-image-animation;
-    animation-duration: 1s;
-    animation-delay: 0.35s;
-    animation-fill-mode: forwards;
-}
-
-#loading-overlay-gradient {
-    animation: 1.5s normal 0.5s 1 forwards loading-overlay-gradient-animation,
-        1s ease-in-out 2s infinite alternate-reverse
-            loading-overlay-gradient-pules-animation;
-}
-
-@keyframes loading-overlay-image-animation {
-    from {
-        opacity: 0;
-        scale: 0.7;
-    }
-
-    to {
-        opacity: 1;
-        scale: 1;
-    }
-}
-
-@keyframes loading-overlay-gradient-animation {
-    from {
-        opacity: 0;
-        scale: 0 1 1;
-    }
-
-    to {
-        opacity: 0.9;
-        scale: 1 1 1;
-    }
-}
-
-@keyframes loading-overlay-gradient-pules-animation {
-    from {
-        opacity: 0.8;
-        scale: 0.8 1 1;
-    }
-
-    to {
-        opacity: 0.9;
-        scale: 1 1 1;
-    }
-}
-</style>