From 781385f991f26a36102fe289f0e44770ff581ec5 Mon Sep 17 00:00:00 2001
From: NotAShelf <raf@notashelf.dev>
Date: Tue, 10 Dec 2024 17:15:23 +0300
Subject: [PATCH] docs: perform DOM manipulation in batches; preprocess data

---
 docs/static/script/search.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/docs/static/script/search.js b/docs/static/script/search.js
index 34ce28b..1537b23 100644
--- a/docs/static/script/search.js
+++ b/docs/static/script/search.js
@@ -1,14 +1,12 @@
 document.addEventListener("DOMContentLoaded", () => {
   if (!window.location.pathname.endsWith("options.html")) return;
 
-  const searchBar = document.createDocumentFragment();
   const searchDiv = document.createElement("div");
   searchDiv.id = "search-bar";
   searchDiv.innerHTML = `
     <input type="text" id="search-input" placeholder="Search options by ID..." />
     <div id="search-results"></div>
   `;
-  searchBar.appendChild(searchDiv);
   document.body.prepend(searchDiv);
 
   const dtElements = Array.from(document.querySelectorAll("dt"));
@@ -22,18 +20,27 @@ document.addEventListener("DOMContentLoaded", () => {
     return;
   }
 
+  const dtElementsData = dtElements.map((dt, index) => ({
+    element: dt,
+    id: dtOptionIds[index],
+    ddElement: ddElements[index],
+  }));
+
   let debounceTimeout;
   document.getElementById("search-input").addEventListener("input", (event) => {
     clearTimeout(debounceTimeout);
     debounceTimeout = setTimeout(() => {
       const query = event.target.value.toLowerCase();
-      dtElements.forEach((dt, index) => {
-        const isMatch = dtOptionIds[index].includes(query);
 
-        if (dt.classList.contains("hidden") !== !isMatch) {
-          dt.classList.toggle("hidden", !isMatch);
-          ddElements[index]?.classList.toggle("hidden", !isMatch);
-        }
+      requestAnimationFrame(() => {
+        const fragment = document.createDocumentFragment();
+        dtElementsData.forEach(({ element, id, ddElement }) => {
+          const isMatch = id.includes(query);
+          if (element.classList.contains("hidden") !== !isMatch) {
+            element.classList.toggle("hidden", !isMatch);
+            ddElement?.classList.toggle("hidden", !isMatch);
+          }
+        });
       });
     }, 200);
   });