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 = ({ 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 = ({ version }) => { >
{mod.icon ? ( - Mod Icon + Mod Icon ) : ( )}