From f8e185662017aa3a7a8f2a72b8170c9889ea8a38 Mon Sep 17 00:00:00 2001
From: NotAShelf <raf@notashelf.dev>
Date: Tue, 10 Dec 2024 23:10:05 +0300
Subject: [PATCH] docs: better performance in the resource widget ft. Keira and
 Michaili

---
 docs/static/script/search.js | 27 +++++++++++++++++++--------
 docs/static/style.scss       | 11 +++++++----
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/docs/static/script/search.js b/docs/static/script/search.js
index 1537b23..e20c231 100644
--- a/docs/static/script/search.js
+++ b/docs/static/script/search.js
@@ -26,21 +26,32 @@ document.addEventListener("DOMContentLoaded", () => {
     ddElement: ddElements[index],
   }));
 
+  const hiddenClass = "hidden";
+  const hiddenStyle = document.createElement("style");
+  hiddenStyle.innerHTML = `.${hiddenClass} { display: none; }`;
+  document.head.appendChild(hiddenStyle);
+
   let debounceTimeout;
   document.getElementById("search-input").addEventListener("input", (event) => {
     clearTimeout(debounceTimeout);
     debounceTimeout = setTimeout(() => {
       const query = event.target.value.toLowerCase();
 
+      const matches = [];
+      const nonMatches = [];
+
+      dtElementsData.forEach(({ element, id, ddElement }) => {
+        const isMatch = id.includes(query);
+        if (isMatch) {
+          matches.push(element, ddElement);
+        } else {
+          nonMatches.push(element, ddElement);
+        }
+      });
+
       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);
-          }
-        });
+        matches.forEach((el) => el?.classList.remove(hiddenClass));
+        nonMatches.forEach((el) => el?.classList.add(hiddenClass));
       });
     }, 200);
   });
diff --git a/docs/static/style.scss b/docs/static/style.scss
index d5f739e..d6becd0 100644
--- a/docs/static/style.scss
+++ b/docs/static/style.scss
@@ -189,14 +189,16 @@ th {
 
 dt {
 	margin: 1.2rem 0 0.8rem;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 42px;
 }
-
 dd {
 	margin-left: 2rem;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
 }
 
-div.book {
-}
+div.book {}
 
 ul {
 	@include margined;
@@ -238,11 +240,12 @@ li {
 	top: 0;
 	background: white;
 	padding: 10px;
-	border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid $color-gray-200;
 	z-index: 1000;
 	@media (prefers-color-scheme: dark) {
 		background: $color-gray-900;
 		color: $color-gray-50;
+		border-bottom: 1px solid black;
 	}
 }