Complete loading overlay statement

frontend/components/global/LoadingOverlay.vue

@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 
+// import
+
+import type { LoadingOverlayProvideType } from "~/pages/index.vue";
+
+// provide / inject
+
+const { showLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
+
 // state
 
 const { $gsap: gsap } = useNuxtApp();
 
+const shouldRenderLoadingOverlay = ref(true);
+
 // lifecycle
 
-onMounted(() => {
+watch(() => showLoadingOverlay.value, (value) => {
+    if (!value) {
         const timeline = gsap.timeline();
 
         timeline
@@ -16,18 +27,28 @@ onMounted(() => {
             .to("#loading-overlay", {
                 scale: 0.8,
                 opacity: 0,
-            delay: 5
+                delay: 3
             })
             .to("#loading-overlay", {
                 opacity: 0,
-            y: "20%"
+                y: "20%",
+                onComplete: () => {
+                    shouldRenderLoadingOverlay.value = false;
+                }
             });
+    }
+}, {
+    once: true
 });
 
 </script>
 
 <template>
-    <div id="loading-overlay" class="fixed inset-0 size-full z-9999 flex-center bg-black">
+    <div
+        v-if="shouldRenderLoadingOverlay"
+        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="" />
         <div
             id="loading-overlay-gradient"
@@ -41,7 +62,7 @@ onMounted(() => {
 #loading-overlay-image {
     animation-name: loading-overlay-image-animation;
     animation-duration: 1s;
-    animation-delay: 0.75s;
+    animation-delay: 0.35s;
     animation-fill-mode: forwards;
 }