diff --git a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx index 2f0e09fc..8e0516ec 100644 --- a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx +++ b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx @@ -57,7 +57,7 @@ function getMessage(leftRatio: number, rightRatio: number, userSelectedOption: C export default function RushCardCurrentRatio() { const { userSelectedOption, cardOptions } = useRushGameStateContext(); const { toggleContents } = useToggleContents(); - const fetchRushBalance = useFetchRushBalance(); + const { fetchRushBalance, isLoadingRushBalance } = useFetchRushBalance(); const [throttle, setThrottle] = useState(false); const leftOptionRatio = getOptionRatio({ @@ -81,7 +81,7 @@ export default function RushCardCurrentRatio() { }); const reloadThrottleButton = () => { - if (!throttle) { + if (!throttle && !isLoadingRushBalance) { fetchRushBalance(); setThrottle(true); setTimeout(() => { diff --git a/client/src/features/RushGame/RushGameSections/SelectedCard.tsx b/client/src/features/RushGame/RushGameSections/SelectedCard.tsx index 29029066..bf9668d3 100644 --- a/client/src/features/RushGame/RushGameSections/SelectedCard.tsx +++ b/client/src/features/RushGame/RushGameSections/SelectedCard.tsx @@ -54,7 +54,7 @@ function SelectedCardCurrentRatio({ onClick }: SelectedCardDetailsProps) { export default function SelectedCard() { const { toggleContents, toggle } = useToggleContents({ useDuration: false }); - const fetchRushBalance = useFetchRushBalance(); + const { fetchRushBalance } = useFetchRushBalance(); const selectedCardToggle = () => { toggle(); diff --git a/client/src/hooks/RushGame/useFetchRushBalance.ts b/client/src/hooks/RushGame/useFetchRushBalance.ts index 4a0573be..0c67b1e3 100644 --- a/client/src/hooks/RushGame/useFetchRushBalance.ts +++ b/client/src/hooks/RushGame/useFetchRushBalance.ts @@ -15,6 +15,7 @@ export default function useFetchRushBalance() { const { data: rushBalanceData, isSuccess: isSuccessRushBalance, + isLoading: isLoadingRushBalance, fetchData: getRushBalance, } = useFetch((token) => RushAPI.getRushBalance(token)); @@ -50,5 +51,5 @@ export default function useFetchRushBalance() { } }, [isSuccessRushBalance, rushBalanceData]); - return fetchRushBalance; + return { fetchRushBalance, isSuccessRushBalance, isLoadingRushBalance }; } diff --git a/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts b/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts index 642d4518..118c1e31 100644 --- a/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts +++ b/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts @@ -9,7 +9,7 @@ import { RUSH_ACTION } from "@/types/rushGame.ts"; export function useFetchRushUserParticipationStatus() { const dispatch = useRushGameDispatchContext(); - const fetchRushBalance = useFetchRushBalance(); + const { fetchRushBalance } = useFetchRushBalance(); const { data: userParticipatedStatus, fetchData: getRushUserParticipationStatus } = useFetch< GetRushUserParticipationStatusResponse, diff --git a/client/src/hooks/useFetch.ts b/client/src/hooks/useFetch.ts index 60f9498c..76849e7f 100644 --- a/client/src/hooks/useFetch.ts +++ b/client/src/hooks/useFetch.ts @@ -5,12 +5,14 @@ export default function useFetch(fetch: (params: P) => Promise, const [data, setData] = useState(null); const [isSuccess, setIsSuccess] = useState(false); const [isError, setIsError] = useState(false); + const [isLoading, setIsLoading] = useState(false); const { showBoundary } = useErrorBoundary(); const fetchData = async (params?: P) => { setIsError(false); setIsSuccess(false); + setIsLoading(true); try { const data = await fetch(params as P); @@ -22,8 +24,10 @@ export default function useFetch(fetch: (params: P) => Promise, if (showError) { showBoundary(error); } + } finally { + setIsLoading(false); } }; - return { data, isSuccess, isError, fetchData }; + return { data, isSuccess, isError, isLoading, fetchData }; }