perf(docs): use CSS to hide filtered icons instead of re-rendering

carbon-design-system · Oct 7, 2024 · b1ce5ba · b1ce5ba
1 parent 1644a50
commit b1ce5ba
Showing 1 changed file with 5 additions and 4 deletions.
diff --git 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>