move fetching data of icons to client side

.github/workflows/deploy-preview.yml

@@ -8,6 +8,8 @@ permissions:
   contents: read
   pages: write
   id-token: write
+  issues: write
+  pull-requests: write
 
 concurrency:
   group: "pages-preview-${{ github.event.pull_request.number }}"

package.json

@@ -28,7 +28,7 @@
 	},
 	"dependencies": {
 		"@tailwindcss/vite": "^4.0.12",
-		"devicon": "^2.16.0",
+		"devicon": "^2.17.0",
 		"tailwindcss": "^4.0.12"
 	}
 }

src/lib/stores/iconStore.js

@@ -9,21 +9,50 @@ export const isDarkMode = writable(false);
 export const selectedIcon = writable(null);
 export const isModalOpen = writable(false);
 
-// Initialize store with data from server
-export function initializeStore(initialIcons, initialTags) {
-  icons.set(initialIcons);
-  availableTags.set(initialTags);
-
-    // Check local storage for dark mode preference
-    if (typeof window !== 'undefined') {
-        const storedDarkMode = localStorage.getItem('darkMode') === 'true';
-        isDarkMode.set(storedDarkMode);
-
-        // Apply theme to document
-        if (storedDarkMode) {
-          document.documentElement.classList.add('dark');
-        }
+// Load icons data from GitHub API
+export async function loadIconsData() {
+  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 = await response.json();
+
+    // Extract all available tags
+    const availableTagsData = new Set();
+    iconsData.forEach(icon => {
+      if (icon.tags && Array.isArray(icon.tags)) {
+        icon.tags.forEach(tag => availableTagsData.add(tag));
       }
+    });
+
+    // Set the data in stores
+    icons.set(iconsData);
+    availableTags.set(Array.from(availableTagsData).sort());
+
+    return { icons: iconsData, availableTags: Array.from(availableTagsData).sort() };
+  } catch (error) {
+    console.error('Error fetching icons:', error);
+    icons.set([]);
+    availableTags.set([]);
+    throw error;
+  }
+}
+
+// Initialize store with dark mode preference
+export function initializeStore() {
+  // Check local storage for dark mode preference
+  if (typeof window !== 'undefined') {
+    const storedDarkMode = localStorage.getItem('darkMode') === 'true';
+    isDarkMode.set(storedDarkMode);
+
+    // Apply theme to document
+    if (storedDarkMode) {
+      document.documentElement.classList.add('dark');
+    }
+  }
 }
 
 // Derived store for filtered icons

src/routes/+page.svelte

@@ -5,15 +5,26 @@
   import IconModal from "../components/IconModal.svelte";
   import {
     initializeStore,
+    loadIconsData,
     filteredIcons,
     isModalOpen,
   } from "$lib/stores/iconStore";
 
-  export let data;
+  let isLoading = true;
+  let error = null;
 
-  onMount(() => {
-    // Initialize store with server-fetched data
-    initializeStore(data.icons, data.availableTags);
+  onMount(async () => {
+    // Initialize store with dark mode preference
+    initializeStore();
+
+    try {
+      // Load icons data from GitHub API
+      await loadIconsData();
+      isLoading = false;
+    } catch (err) {
+      error = err.message;
+      isLoading = false;
+    }
   });
 </script>
 
@@ -22,9 +33,16 @@
 >
   <div class="container mx-auto p-4" >
 
-  {#if data.error}
+  {#if isLoading}
+    <div class="flex justify-center items-center min-h-64">
+      <div class="text-center">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+        <p class="text-gray-600 dark:text-gray-400">Loading icons...</p>
+      </div>
+    </div>
+  {:else if error}
     <div class="bg-red-100 dark:bg-red-900 p-4 rounded-lg">
-      <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}
     <SearchFilter />