fix: refactor onMount to avoid unnecessary async calls for search (#481)

* fix: refactor onMount to avoid unnecessary async calls for search

* Production debugging to check the console

* feat: enhance Pagefind integration with improved loading checks and error handling

* fix: improve Pagefind integration with event handling for loading and errors

pagefind.yml

@@ -1,3 +1,6 @@
 exclude_selectors:
   - "span.katex"
   - "span.katex-display"
+  - "[data-pagefind-ignore]"
+  - ".search-panel"
+  - "#search-panel"

src/components/Navbar.astro

@@ -105,13 +105,36 @@ loadButtonScript();
 
 {import.meta.env.PROD && <script is:inline define:vars={{scriptUrl: url('/pagefind/pagefind.js')}}>
 async function loadPagefind() {
-    const pagefind = await import(scriptUrl)
+    try {
-    await pagefind.options({
+        const response = await fetch(scriptUrl, { method: 'HEAD' });
-        'excerptLength': 20
+        if (!response.ok) {
-    })
+            throw new Error(`Pagefind script not found: ${response.status}`);
-    pagefind.init()
+        }
-    window.pagefind = pagefind
+
-    pagefind.search('')     // speed up the first search
+        const pagefind = await import(scriptUrl);
+
+        await pagefind.options({
+            excerptLength: 20
+        });
+
+        window.pagefind = pagefind;
+
+        document.dispatchEvent(new CustomEvent('pagefindready'));
+        console.log('Pagefind loaded and initialized successfully, event dispatched.');
+    } catch (error) {
+        console.error('Failed to load Pagefind:', error);
+        window.pagefind = {
+            search: () => Promise.resolve({ results: [] }),
+            options: () => Promise.resolve(),
+        };
+        document.dispatchEvent(new CustomEvent('pagefindloaderror'));
+        console.log('Pagefind load error, event dispatched.');
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadPagefind);
+} else {
+    loadPagefind();
 }
-loadPagefind()
 </script>}

src/components/Search.svelte

@@ -11,6 +11,7 @@ let keywordMobile = "";
 let result: SearchResult[] = [];
 let isSearching = false;
 let pagefindLoaded = false;
+let initialized = false;
 
 const fakeResult: SearchResult[] = [
 	{
@@ -53,18 +54,25 @@ const search = async (keyword: string, isDesktop: boolean): Promise<void> => {
 		return;
 	}
 
+	if (!initialized) {
+		return;
+	}
+
 	isSearching = true;
 
 	try {
 		let searchResults: SearchResult[] = [];
 
-		if (import.meta.env.PROD && pagefindLoaded) {
+		if (import.meta.env.PROD && pagefindLoaded && window.pagefind) {
 			const response = await window.pagefind.search(keyword);
 			searchResults = await Promise.all(
 				response.results.map((item) => item.data()),
 			);
-		} else {
+		} else if (import.meta.env.DEV) {
 			searchResults = fakeResult;
+		} else {
+			searchResults = [];
+			console.error("Pagefind is not available in production environment.");
 		}
 
 		result = searchResults;
@@ -78,18 +86,56 @@ const search = async (keyword: string, isDesktop: boolean): Promise<void> => {
 	}
 };
 
-onMount(async () => {
+onMount(() => {
-	pagefindLoaded = typeof window !== "undefined" && "pagefind" in window;
+	const initializeSearch = () => {
+		initialized = true;
+		pagefindLoaded =
+			typeof window !== "undefined" &&
+			!!window.pagefind &&
+			typeof window.pagefind.search === "function";
+		console.log("Pagefind status on init:", pagefindLoaded);
+		if (keywordDesktop) search(keywordDesktop, true);
+		if (keywordMobile) search(keywordMobile, false);
+	};
 
 	if (import.meta.env.DEV) {
 		console.log(
 			"Pagefind is not available in development mode. Using mock data.",
 		);
+		initializeSearch();
+	} else {
+		document.addEventListener("pagefindready", () => {
+			console.log("Pagefind ready event received.");
+			initializeSearch();
+		});
+		document.addEventListener("pagefindloaderror", () => {
+			console.warn(
+				"Pagefind load error event received. Search functionality will be limited.",
+			);
+			initializeSearch(); // Initialize with pagefindLoaded as false
+		});
+
+		// Fallback in case events are not caught or pagefind is already loaded by the time this script runs
+		setTimeout(() => {
+			if (!initialized) {
+				console.log("Fallback: Initializing search after timeout.");
+				initializeSearch();
+			}
+		}, 2000); // Adjust timeout as needed
 	}
 });
 
-$: search(keywordDesktop, true);
+$: if (initialized && keywordDesktop) {
-$: search(keywordMobile, false);
+	(async () => {
+		await search(keywordDesktop, true);
+	})();
+}
+
+$: if (initialized && keywordMobile) {
+	(async () => {
+		await search(keywordMobile, false);
+	})();
+}
 </script>
 
 <!-- search bar for desktop view -->