From 8f129e689b4ae06d083e139e29b312c0f08946b0 Mon Sep 17 00:00:00 2001
From: Roshanjossey <roshanjossey@gmail.com>
Date: Fri, 24 Oct 2025 02:02:05 +0200
Subject: [PATCH] move fetching icons to client side

---
 src/lib/stores/iconStore.ts | 70 +++++++++++++++++++++++++++++++------
 src/routes/+page.server.ts  | 35 -------------------
 src/routes/+page.svelte     | 21 ++++++-----
 3 files changed, 70 insertions(+), 56 deletions(-)
 delete mode 100644 src/routes/+page.server.ts

diff --git a/src/lib/stores/iconStore.ts b/src/lib/stores/iconStore.ts
index 6041ac2..6e680fc 100644
--- a/src/lib/stores/iconStore.ts
+++ b/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]) => {
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
deleted file mode 100644
index a05adf8..0000000
--- a/src/routes/+page.server.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { IIcon } from "$lib/types/types"
-
-export async function load() {
-  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 icons: IIcon[] = await response.json()
-
-    // Extract all available tags
-    const availableTags = new Set()
-    icons.forEach((icon) => {
-      if (icon.tags && Array.isArray(icon.tags)) {
-        icon.tags.forEach((tag) => availableTags.add(tag))
-      }
-    })
-
-    return {
-      icons,
-      availableTags: Array.from(availableTags).sort(),
-    }
-  } catch (error: any) {
-    console.error("Error fetching icons:", error)
-    return {
-      icons: [],
-      availableTags: [],
-      error: error.message,
-    }
-  }
-}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1b3de7a..8e24bed 100644
--- a/src/routes/+page.svelte
+++ b/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 />