refactor: load search index only when the search bar is focused

src/components/Search.astro

@@ -19,8 +19,13 @@
 
   let fuse;
   let posts = [];
+  let searchInitialized = false;
 
   async function initializeSearch() {
+    // Prevent multiple initializations
+    if (searchInitialized) return;
+    try {
+      // Fetch the search index
       const response = await fetch('/search-index.json');
       posts = await response.json();
 
@@ -29,6 +34,11 @@
         threshold: 0.3,
         includeMatches: true
       });
+      searchInitialized = true;
+      document.getElementById('search-results').innerHTML = '';
+    } catch (error) {
+        console.error('Error fetching search index:', error);
+    }
   }
 
   function performSearch(query) {
@@ -37,6 +47,8 @@
       return;
     }
 
+    if (!searchInitialized) return;
+
     const results = fuse.search(query);
     const resultsElement = document.getElementById('search-results');
     
@@ -58,15 +70,28 @@
 
     resultsElement.innerHTML = html;
   }
-
-  // Initialize search when the component mounts
-  initializeSearch();
-
   // Add event listener for search input
   const searchInput = document.getElementById('search-input');
+
+  // Initialize search only when the input is focused or clicked
+  searchInput.addEventListener('focus', initializeSearch);
+  searchInput.addEventListener('click', initializeSearch);
+
   searchInput.addEventListener('input', (e) => {
+    if (!searchInitialized) {
+        initializeSearch().then(() => {
             performSearch(e.target.value);
         });
+    } else {
+        performSearch(e.target.value);
+    }
+  });
+
+  searchInput.addEventListener('focus', () => {
+    if (!searchInitialized) {
+      document.getElementById('search-results').innerHTML = '<p>Loading search index...</p>';
+    }
+  });
 </script>
 
 <style>