🔍 Offload search functionality to a web worker for improved UI responsiveness and performance

code/websites/pokedex.online/src/views/GamemasterExplorer.vue

@@ -625,6 +625,9 @@ const onSearchInput = debounce(async () => {
     return;
   }
 
+  // Initialize worker if needed
+  initSearchWorker();
+
   // Show progress for long searches
   const searchTerm = searchQuery.value.toLowerCase();
   operationProgress.value = {
@@ -634,53 +637,18 @@ const onSearchInput = debounce(async () => {
     complete: false
   };
 
-  await perfMonitor('Search', async () => {
-    const results = [];
-    const device = getDevicePerformance();
-    const chunkSize = device.recommendedChunkSize;
+  // Offload search to worker to avoid blocking UI
+  searchWorkerRequestId++;
+  const requestId = searchWorkerRequestId;
   
-    // Search through ALL fileLines, not just displayLines
-    for (let i = 0; i < fileLines.value.length; i += chunkSize) {
-      const chunk = fileLines.value.slice(i, i + chunkSize);
-
-      chunk.forEach((lineContent, idx) => {
-        const actualIndex = i + idx;
-        const matches = lineContent.toLowerCase().includes(searchTerm);
-
-        // Only update displayLines if it's within the visible range
-        const displayIndex = displayLines.value.findIndex(
-          l => l.lineNumber === actualIndex + 1
-        );
-        if (displayIndex !== -1) {
-          displayLines.value[displayIndex].hasMatch = matches;
-        }
-
-        if (matches) {
-          results.push(actualIndex);
-        }
+  searchWorker.postMessage({
+    lines: fileLines.value,
+    searchTerm: searchTerm,
+    id: requestId
   });
 
-      // Update progress
-      operationProgress.value.percent = Math.min(
-        ((i + chunkSize) / fileLines.value.length) * 100,
-        100
-      );
-
-      // Yield to browser
-      if (i % (chunkSize * 3) === 0) {
-        await new Promise(resolve => setTimeout(resolve, 0));
-      }
-    }
-
-    searchResults.value = results;
-    currentResultIndex.value = 0;
-
-    // Complete animation
-    operationProgress.value.complete = true;
-    setTimeout(() => {
-      operationProgress.value.active = false;
-    }, 500);
-  });
+  // Store current request ID to ignore stale results
+  searchWorkerRequestId = requestId;
 
   // Add to search history
   searchHistory.addToHistory(searchQuery.value);