Complete Loading Overlay component

frontend/components/global/LoadingOverlay.vue

@@ -3,29 +3,33 @@
 // state
 
 const { $gsap: gsap } = useNuxtApp();
+const showLoadingOverlay = useState("showLoadingOverlay");
+const disableLoadingOverlay = useState("disableLoadingOverlay");
+const shouldRenderLoadingOverlay = ref(true);
 
-const showLoadingOverlay = useState('showLoadingOverlay');
+const isWindowScrollLocked = useScrollLock(window);
 
-// lifecycle
+// watch
 
 watch(() => showLoadingOverlay.value, (value) => {
     if (!value) {
         const timeline = gsap.timeline();
 
+        const imageElement = document.querySelector("#loading-overlay-image") as HTMLImageElement;
+
+        imageElement.src = "/img/heymlz-loading-2.gif";
+
         timeline
             .to("#loading-overlay", {
                 scale: 1
             })
             .to("#loading-overlay", {
-                scale: 0.8,
                 opacity: 0,
-                delay: 2.5
-            })
-            .to("#loading-overlay", {
-                opacity: 0,
-                y: "20%",
+                delay: 2,
                 onComplete: () => {
                     shouldRenderLoadingOverlay.value = false;
+                    isWindowScrollLocked.value = false;
+                    disableLoadingOverlay.value = true;
                 }
             });
     }
@@ -33,6 +37,16 @@ watch(() => showLoadingOverlay.value, (value) => {
     once: true
 });
 
+
+// lifecycle
+
+onMounted(() => {
+    isWindowScrollLocked.value = true;
+
+    const newImage = new Image();
+    newImage.src = "/img/heymlz-loading-2.gif";
+});
+
 </script>
 
 <template>
@@ -41,7 +55,12 @@ watch(() => showLoadingOverlay.value, (value) => {
         id="loading-overlay"
         class="fixed inset-0 size-full z-9999 flex-center bg-black"
     >
-        <img id="loading-overlay-image" src="/video/loading-2.gif" class="opacity-0 scale-70 absolute z-20" alt="" />
+        <img
+            id="loading-overlay-image"
+            src="/img/heymlz-loading-1.gif"
+            class="opacity-0 scale-70 absolute z-20"
+            alt=""
+        />
         <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]"