diff --git a/discord/src/pages/dashboard/panels/GuildListPanel.tsx b/discord/src/pages/dashboard/panels/GuildListPanel.tsx index e6b0955..ecc37f0 100644 --- a/discord/src/pages/dashboard/panels/GuildListPanel.tsx +++ b/discord/src/pages/dashboard/panels/GuildListPanel.tsx @@ -1,7 +1,7 @@ import { ChannelStatusBox } from "@src/components/ChannelStatusBox"; import { GuildStatusBox } from "@src/components/GuildStatusBox"; import { useChatStore } from "@src/stores/chatStore"; -import { useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { PanelWrapper } from "./PanelWrapper"; import ObserverWrapper from "@src/components/ObserverWrapper"; @@ -13,33 +13,47 @@ export const GuildListPanel = () => { const clearSelectedGuild = useChatStore((state) => state.clearSelectedGuild); const isLoading = useChatStore((state) => state.isLoading); const [loadingPrompt, setLoadingPrompt] = useState(false); - const [timeoutId, setTimeoutId] = useState(null); + const loadingPromptTimeout = useRef | null>(null); const selectedGuildName = useMemo(() => { const guild = guildList?.guilds.find((g) => g.id === selectedGuild); return guild ? guild.name : "Select a Guild"; }, [guildList, selectedGuild]); - const startLoadingPromptTimeout = () => { + const resetLoadingPromptTimeout = useCallback(() => { setLoadingPrompt(false); - if (timeoutId) { - clearTimeout(timeoutId); + if (loadingPromptTimeout.current) { + clearTimeout(loadingPromptTimeout.current); } - const newTimeoutId = setTimeout(() => { + loadingPromptTimeout.current = setTimeout(() => { setLoadingPrompt(true); - }, 5000); // Show loading prompt after 5 seconds of loading - setTimeoutId(newTimeoutId); - }; + }, 5000); + }, []); + + useEffect(() => { + if (isLoading) { + resetLoadingPromptTimeout(); + } else { + setLoadingPrompt(false); + if (loadingPromptTimeout.current) { + clearTimeout(loadingPromptTimeout.current); + loadingPromptTimeout.current = null; + } + } - if (!timeoutId) { - startLoadingPromptTimeout(); - } + return () => { + if (loadingPromptTimeout.current) { + clearTimeout(loadingPromptTimeout.current); + loadingPromptTimeout.current = null; + } + }; + }, [isLoading, resetLoadingPromptTimeout]); const handleFetchGuildList = async () => { try { - startLoadingPromptTimeout(); + resetLoadingPromptTimeout(); await fetchGuildList(); } catch (error) { console.error("Failed to fetch guild list:", error);