From 8d8b77ca07f28593977d33f861a5eb60f41a9703 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 27 May 2021 07:28:30 -0400
Subject: [PATCH] fix icon search and debounce results

---
 docs/components/icon.md | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/docs/components/icon.md b/docs/components/icon.md
index 61ee7d872..791b99fc2 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -500,6 +500,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
       const loader = container.querySelector('.icon-loader');
       const list = container.querySelector('.icon-list');
       const queue = [];
+      let inputTimeout;
 
       // Generate icons
       icons.map(i => {
@@ -530,15 +531,18 @@ If you want to change the icons Shoelace uses internally, you can register an ic
 
       // Filter as the user types
       input.addEventListener('sl-input', () => {
-        [...list.querySelectorAll('.icon-list-item')].map(item => {
-          const filter = input.value.toLowerCase();
-          if (filter === '') {
-            item.hidden = false;
-          } else {
-            const terms = item.getAttribute('data-terms').toLowerCase();
-            item.hidden = terms.indexOf(filter) < 0;
-          }
-        });
+        clearTimeout(inputTimeout);
+        inputTimeout = setTimeout(() => {
+          [...list.querySelectorAll('.icon-list-item')].map(item => {
+            const filter = input.value.toLowerCase();
+            if (filter === '') {
+              item.hidden = false;
+            } else {
+              const terms = item.getAttribute('data-terms').toLowerCase();
+              item.hidden = terms.indexOf(filter) < 0;
+            }
+          });
+        }, 250);
       });
 
       // Sort by type and remember preference
@@ -559,6 +563,10 @@ If you want to change the icons Shoelace uses internally, you can register an ic
     padding: var(--sl-spacing-medium);
   }
 
+  .icon-search [hidden] {
+    display: none;
+  }
+
   .icon-search-controls {
     display: flex;
   }