From a0b9ac7bcc195a5cd8e5577a0dff16cb51d9775f Mon Sep 17 00:00:00 2001
From: kkthxbye <>
Date: Thu, 25 Nov 2021 12:14:07 +0100
Subject: [PATCH] UI: Improve performance of the quick filter

---
 netbox/project-static/dist/netbox.js     | Bin 322534 -> 322575 bytes
 netbox/project-static/dist/netbox.js.map | Bin 310793 -> 310863 bytes
 netbox/project-static/src/search.ts      |  22 ++++++++++++++++------
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index 6a60ff56def395459f1244adc618e97ed9a518a2..b8567f0606eb5fb62dc8f125a33623f5466bf28c 100644
GIT binary patch
delta 204
zcmaEMUAX^-a6=1Y3)2>6=WDV$DYntE)@k`g8ab&Y3Z)A9X$qN|)gX3`ZRvEGE6gVK
zIf}Nnd8IiyYHAueddV57$=RtXwu*+Da9z0|U8(6BrJ9<VX&T9TC8@<F8o7EU`9AsO
zsYT9-#i<&anwr%qdIhD$89-ImNkyrN*|oK3wx;N1=B1=o_@@Dt*x4G`m+B?wBo-G>
f7hk~0JKbO}3nydgwCl{0?NZm7w@Y1TIU@o9Lia`2

delta 92
zcmV-i0Hgnp*c0a06M%#PgaWh!L)MoB)B|Ogt=0nw4QwE9W*}u}C}b%qX=az7)B_g;
yDJgqoml2==6PF;@0|*Q|Vsd3+Ykg&Gb7dfx{L}*(mlo9nu!r&21Gn+l1RfMlUn58W

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index ba7d8cd2f7dca3b93a9f961f1393011110461af4..c2e1c5b4f3d06367327002e48c1995cdd2b4b000 100644
GIT binary patch
delta 169
zcmeDDBXs_cP(ur23)2?n=Xdzr^__KG9UTpvb=)0YGp2LhW)7NeeV5rV$F%?~5vk+t
z=;#fUbk1_p@ptt10}_tmAVGhSV1|>9qoboI$cRXtKu5<w9ZwM9>ga6g1QPVr33YS~
s1?lkzvRsRh1%WC(b;2D@opYwoyUQHOXf*xDUFKj$<Ly58nD^cX0Fdc4qW}N^

delta 100
zcmX^AN2v3UP(ur23)2?n=XV%gr*qzB_GfgT?sAve#K^tCS;y7U(NibX(J@rV-_g+@
t$Z{@n0+Q~II__{8PY^58G0VAN`jflNk&Kzs?d~xLGiGg{bdP!OeE{3hBIE!7

diff --git a/netbox/project-static/src/search.ts b/netbox/project-static/src/search.ts
index 120d833ea..3140b8d7f 100644
--- a/netbox/project-static/src/search.ts
+++ b/netbox/project-static/src/search.ts
@@ -107,6 +107,9 @@ function initTableFilter(): void {
       // Create a regex pattern from the input search text to match against.
       const filter = new RegExp(target.value.toLowerCase().trim());
 
+      // List of which rows which match the query
+      const matchedRows: Array<HTMLTableRowElement> = [];
+
       for (const row of rows) {
         // Find the row's checkbox and deselect it, so that it is not accidentally included in form
         // submissions.
@@ -114,19 +117,26 @@ function initTableFilter(): void {
         if (checkBox !== null) {
           checkBox.checked = false;
         }
+
         // Iterate through each row's cell values
         for (const value of getRowValues(row)) {
           if (filter.test(value.toLowerCase())) {
-            // If this row matches the search pattern, but is already hidden, unhide it and stop
-            // iterating through the rest of the cells.
-            row.classList.remove('d-none');
+            // If this row matches the search pattern, add it to the list.
+            matchedRows.push(row);
             break;
-          } else {
-            // If none of the cells in this row match the search pattern, hide the row.
-            row.classList.add('d-none');
           }
         }
       }
+
+      // Iterate the rows again to set visibility.
+      // This results in a single reflow instead of one for each row.
+      for (const row of rows) {
+        if (matchedRows.indexOf(row) >= 0) {
+          row.classList.remove('d-none');
+        } else {
+          row.classList.add('d-none');
+        }
+      }
     }
     input.addEventListener('keyup', debounce(handleInput, 300));
   }