fix: restore landing visibility without blocking lazy loads

1 files changed, 29 insertions, 16 deletions

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 604becee..9c76ef04 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -4,7 +4,7 @@ import { env } from "$env/dynamic/public";
 import localforage from "localforage";
 import { onMount } from "svelte";
 
-let sectionsVisible = $state<boolean[]>([false, false, false]);
+let sectionsLoaded = $state<boolean[]>([false, false, false]);
 let mangaContainer: HTMLElement;
 let animeContainer: HTMLElement;
 let gridLimit = $state<number | undefined>(undefined);
@@ -56,13 +56,35 @@ const calculateLimit = () => {
 };
 
 onMount(() => {
+	if (!("IntersectionObserver" in window)) {
+		sectionsLoaded = [true, true, true];
+		
+		calculateLimit();
+
+		const resizeObserver = new ResizeObserver(calculateLimit);
+
+		if (mangaContainer) resizeObserver.observe(mangaContainer);
+		if (animeContainer) resizeObserver.observe(animeContainer);
+
+		const handleKeydown = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && demoFocused) demoFocused = false;
+		};
+
+		document.addEventListener("keydown", handleKeydown);
+
+		return () => {
+			resizeObserver.disconnect();
+			document.removeEventListener("keydown", handleKeydown);
+		};
+	}
+
 	const intersectionObserver = new IntersectionObserver(
 		(entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
 					const index = Number(entry.target.getAttribute("data-section"));
 
-					sectionsVisible[index] = true;
+					sectionsLoaded[index] = true;
 				}
 			});
 		},
@@ -94,16 +116,16 @@ onMount(() => {
 });
 
 $effect(() => {
-	if (sectionsVisible[0]) loadMangaDemo();
+	if (sectionsLoaded[0]) loadMangaDemo();
 });
 
 $effect(() => {
-	if (sectionsVisible[1]) loadAnimeDemo();
+	if (sectionsLoaded[1]) loadAnimeDemo();
 });
 </script>
 
 <div class="landing">
-  <section class="landing-section" class:visible={sectionsVisible[0]} data-section="0">
+  <section class="landing-section" data-section="0">
     <div class="section-row">
       <div class="section-demo card" bind:this={mangaContainer}>
         {#if MangaDemoComponent}
@@ -128,7 +150,7 @@ $effect(() => {
     </div>
   </section>
 
-  <section class="landing-section" class:visible={sectionsVisible[1]} data-section="1">
+  <section class="landing-section" data-section="1">
     <div class="section-row reverse">
       <div class="section-info card">
         <p class="section-label">Anime Tracking</p>
@@ -154,7 +176,6 @@ $effect(() => {
 
   <section
     class="landing-section tools-section"
-    class:visible={sectionsVisible[2]}
     data-section="2"
   >
     <div class="section-row">
@@ -264,16 +285,8 @@ $effect(() => {
   }
 
   .landing-section {
-    opacity: 0;
-    transform: translateY(30px);
-    transition:
-      opacity 0.6s ease,
-      transform 0.6s ease;
-  }
-
-  .landing-section.visible {
     opacity: 1;
-    transform: translateY(0);
+    transform: none;
   }
 
   .section-row {