⚙️ Add loadMore button.

src/routes/+layout.svelte

@@ -40,7 +40,7 @@
   >
     <div class="md:px-6 md:py-6">
       <nav
-        class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
+        class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
       >
         <a
           href="/"
@@ -66,20 +66,6 @@
           </a>
         {/each}
       </nav>
-      <a
-        href="https://twitter.com/pheralb_"
-        target="_blank"
-        class="group mt-5 md:flex hidden items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
-      >
-        <Heart color="#991b1b" size={18} weight={'duotone'} />
-        <div class="flex items-center space-x-1">
-          <p class="text-muted text-sm">Created by pheralb</p>
-          <ArrowUpRight
-            size={14}
-            class="transition-transform duration-300 group-hover:-translate-y-[1px]"
-          />
-        </div>
-      </a>
     </div>
   </aside>
   <div class="ml-0 md:ml-56 pb-6">

src/routes/+page.svelte

@@ -14,9 +14,11 @@
   import NotFound from '@/components/notFound.svelte';
 
   // Icons:
-  import { ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
+  import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
 
   let sorted: boolean = false;
+  let isFirstLoad: boolean = true;
+  let showAll: boolean = false;
 
   // Search:
   let searchTerm = '';
@@ -29,12 +31,22 @@
     });
   }
 
+  const loadSvgs = () => {
+    if (isFirstLoad || showAll) {
+      filteredSvgs = allSvgs;
+      isFirstLoad = false;
+    } else {
+      filteredSvgs = allSvgs.slice(0, 30);
+    }
+  };
+
   // Search svgs:
   const searchSvgs = () => {
-    return (filteredSvgs = allSvgs.filter((svg: iSVG) => {
+    loadSvgs();
+    filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
       return svgTitle.includes(searchTerm.toLowerCase());
-    }));
+    });
   };
 
   // Clear search:
@@ -66,6 +78,8 @@
       return b.id! - a.id!;
     });
   };
+
+  loadSvgs();
 </script>
 
 <svelte:head>
@@ -97,10 +111,24 @@
     </button>
   </div>
   <Grid>
-    {#each filteredSvgs as svg}
+    {#each filteredSvgs.slice(0, showAll ? undefined : 30) as svg}
       <SvgCard svgInfo={svg} />
     {/each}
   </Grid>
+  {#if filteredSvgs.length > 30 && !showAll}
+    <div class="flex items-center justify-center mt-4">
+      <button
+        class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
+        on:click={() => (showAll = true)}
+      >
+        <ArrowDown size={16} strokeWidth={2} />
+        <span>Load All SVGs</span>
+        <span class="opacity-70">
+          ({filteredSvgs.length - 30} more)
+        </span>
+      </button>
+    </div>
+  {/if}
   {#if filteredSvgs.length === 0}
     <NotFound notFoundTerm={searchTerm} />
   {/if}