From b1ce5ba160e40d4a848af0dbae06d140da9b4791 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 7 Oct 2024 09:05:13 -0700
Subject: [PATCH] perf(docs): use CSS to hide filtered icons instead of
 re-rendering

---
 docs/src/components/index.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/index.svelte b/docs/src/components/index.svelte
index 142b74d..a0d40f1 100644
--- a/docs/src/components/index.svelte
+++ b/docs/src/components/index.svelte
@@ -106,18 +106,19 @@
     </Row>
     <Row>
       <Column>
-        <div class="grid">
+        <ul class="grid">
           {#each pictogramNames as pictogram (pictogram)}
-            {#if filteredModuleNames.includes(pictogram)}
+            {@const isFiltered = filteredModuleNames.includes(pictogram)}
+            <li style:display={isFiltered ? "inline" : "none"}>
               <ClickableTile
                 title={pictogram}
                 on:click={() => (moduleName = pictogram)}
               >
                 <svelte:component this={pictograms[pictogram]} />
               </ClickableTile>
-            {/if}
+            </li>
           {/each}
-        </div>
+        </ul>
       </Column>
     </Row>
   </Grid>