Implement critical load if the showcase load is too long

frontend/components/global/LoadingOverlay.vue

@@ -9,6 +9,7 @@ const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
 
 const shouldRenderLoadingOverlay = ref(true);
 const isAssetLoaded = ref(false);
+const criticalLoad = ref(true);
 
 const progressInterval = ref<NodeJS.Timeout | null>(null);
 const assetLoadingProgress = ref(10);
@@ -26,6 +27,7 @@ const progressStyle = computed(() => {
 // methods
 
 const onAssetLoaded = () => {
+    criticalLoad.value = false;
     clearInterval(progressInterval.value!);
     assetLoadingProgress.value = 100;
     isAssetLoaded.value = true;
@@ -42,6 +44,14 @@ const onAssetFinished = () => {
     });
 };
 
+// watch
+
+watch([assetLoadingProgress, criticalLoad], ([assetLoadingProgress, criticalLoad]) => {
+    if (criticalLoad && assetLoadingProgress >= 100) {
+        onAssetFinished();
+    }
+});
+
 // lifecycle
 
 onMounted(() => {
@@ -58,7 +68,7 @@ onMounted(() => {
 
     progressInterval.value = setInterval(() => {
         assetLoadingProgress.value += Math.random() * 10;
-    }, 500);
+    }, 250);
 
     gsap.to("#loading-overlay", {
         opacity: 1,
@@ -76,9 +86,15 @@ onMounted(() => {
             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]" />
+            <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
+                    class="bg-slate-100 h-full w-full transition-all duration-250"
+                    :style="progressStyle"
+                />
             </div>
         </div>