From d44fc53016be4278f2692bfeabc8c0b74dab3b80 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 4 Apr 2026 23:50:30 +0200
Subject: [PATCH] Mod tab fix

---
 src/components/ModsSection.tsx | 36 +++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/ModsSection.tsx b/src/components/ModsSection.tsx
index 618f458..f62aeb6 100644
--- a/src/components/ModsSection.tsx
+++ b/src/components/ModsSection.tsx
@@ -42,24 +42,28 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
     string[]
   >([]);
 
-  useEffect(() => {
-    const loadMods = async () => {
-      if (activeTab === "installed") {
-        const m = await getInstalledMods(version.id);
+  const loadMods = async () => {
+    if (activeTab === "installed") {
+      const m = await getInstalledMods(version.id);
+      setMods(m);
+    } else {
+      const m = await discoverMods(searchQuery);
+      if (activeTab === "discover") {
+        // Fix: If discover mods takes too long and the user switches tabs it glitches
         setMods(m);
-      } else {
-        const m = await discoverMods(searchQuery);
-        if (activeTab === "discover") {
-          // Fix: If discover mods takes too long and the user switches tabs it glitches
-          setMods(m);
-        }
       }
-    };
+    }
+  };
 
+  useEffect(() => {
     const id = setTimeout(loadMods, 800);
-
     return () => clearTimeout(id);
-  }, [activeTab, version.id, searchQuery]);
+  }, [version.id, searchQuery]);
+
+  useEffect(() => {
+    setMods([]);
+    loadMods();
+  }, [activeTab]);
 
   const handleToggleMod = async (modId: string, enable: boolean) => {
     if (enable) await enableMod(version.id, modId);
@@ -152,7 +156,11 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
             >
               <div className="w-12 h-12 rounded-lg bg-zinc-800 border border-saturn-border flex items-center justify-center shrink-0">
                 {mod.icon ? (
-                  <img src={mod.icon} alt="Mod Icon" className="w-full h-full rounded-lg" />
+                  <img
+                    src={mod.icon}
+                    alt="Mod Icon"
+                    className="w-full h-full rounded-lg"
+                  />
                 ) : (
                   <Package size={24} className="text-saturn-text-secondary" />
                 )}