move fetching icons to client side

src/lib/stores/iconStore.ts

@@ -8,26 +8,76 @@ export const selectedTags: Writable<string[]> = writable([])
 export const isDarkMode: Writable<boolean> = writable(false)
 export const selectedIcon: Writable<IIcon | null> = writable(null)
 export const isModalOpen: Writable<boolean> = writable(false)
+export const isLoading: Writable<boolean> = writable(false)
+export const error: Writable<string | null> = writable(null)
 
-export function initializeStore(
-  initialIcons: IIcon[],
-  initialTags: string[],
-): void {
-  icons.set(initialIcons)
-  availableTags.set(initialTags)
+export async function fetchIconsData(): Promise<void> {
+  isLoading.set(true)
+  error.set(null)
+
+  try {
+    const response = await fetch(
+      "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json",
+    )
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch icons: ${response.statusText}`)
+    }
+
+    const iconsData: IIcon[] = await response.json()
+
+    // Extract all available tags
+    const availableTagsSet = new Set<string>()
+    iconsData.forEach((icon) => {
+      if (icon.tags && Array.isArray(icon.tags)) {
+        icon.tags.forEach((tag) => availableTagsSet.add(tag))
+      }
+    })
 
-  // Check local storage for dark mode preference
+    const sortedTags = Array.from(availableTagsSet).sort()
+
+    // Set the data in stores
+    icons.set(iconsData)
+    availableTags.set(sortedTags)
+
+    // Initialize dark mode preference
+    initializeDarkMode()
+  } catch (err: any) {
+    console.error("Error fetching icons:", err)
+    error.set(err.message)
+    icons.set([])
+    availableTags.set([])
+  } finally {
+    isLoading.set(false)
+  }
+}
+
+function initializeDarkMode(): void {
   if (typeof window !== "undefined") {
-    const storedDarkMode = localStorage.getItem("darkMode") === "true"
-    isDarkMode.set(storedDarkMode)
+    // Check local storage for dark mode preference, default to true if not set
+    const storedDarkMode = localStorage.getItem("darkMode")
+    const isDark = storedDarkMode === null ? true : storedDarkMode === "true"
+
+    isDarkMode.set(isDark)
 
     // Apply theme to document
-    if (storedDarkMode) {
+    if (isDark) {
       document.documentElement.classList.add("dark")
+    } else {
+      document.documentElement.classList.remove("dark")
     }
   }
 }
 
+export function initializeStore(
+  initialIcons: IIcon[],
+  initialTags: string[],
+): void {
+  icons.set(initialIcons)
+  availableTags.set(initialTags)
+  initializeDarkMode()
+}
+
 export const filteredIcons: Readable<IIcon[]> = derived(
   [icons, searchTerm, selectedTags],
   ([$icons, $searchTerm, $selectedTags]) => {

src/routes/+page.svelte

@@ -1,31 +1,30 @@
 <script lang="ts">
 import { onMount } from "svelte"
 import IconGrid from "../components/iconGrid/IconGrid.svelte"
-
 import IconModal from "../components/modal/IconModal.svelte"
 import {
-  initializeStore,
+  fetchIconsData,
   filteredIcons,
   isModalOpen,
+  isLoading,
+  error,
 } from "$lib/stores/iconStore"
 import FiltersBar from "../components/filters/FiltersBar.svelte"
 
-export let data
-
 onMount(() => {
-  const tags: string[] = Array.isArray(data.availableTags)
-    ? data.availableTags.map((tag) => String(tag))
-    : []
-
-  initializeStore(data.icons, tags)
+  fetchIconsData()
 })
 </script>
 
 <main class="min-h-screen dark:bg-gray-900 dark:text-white">
   <div class="base-container">
-    {#if data.error}
+    {#if $isLoading}
+      <div class="flex items-center justify-center py-8">
+        <div class="text-lg">Loading icons...</div>
+      </div>
+    {:else if $error}
       <div class="rounded-lg bg-red-100 p-4 dark:bg-red-900">
-        <p class="text-red-700 dark:text-red-300">Error: {data.error}</p>
+        <p class="text-red-700 dark:text-red-300">Error: {$error}</p>
       </div>
     {:else}
       <FiltersBar />