diff --git a/dapp/src/hooks/useDebounce.ts b/dapp/src/hooks/useDebounce.ts new file mode 100644 index 000000000..eda439bb3 --- /dev/null +++ b/dapp/src/hooks/useDebounce.ts @@ -0,0 +1,23 @@ +import { useCallback, useRef } from "react" + +/** + * Debounce a function + * @param callback The function to debounce + * @param delay The delay in ms + * @returns A debounced function + */ +export default function useDebounce(callback: VoidFunction, delay = 250) { + const latestTimeout = useRef() + + const memoizedCallback = useCallback(callback, [callback]) + + return () => { + if (latestTimeout.current) { + clearTimeout(latestTimeout.current) + } + + latestTimeout.current = setTimeout(() => { + memoizedCallback() + }, delay) + } +} diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx index 00b9cd985..651a6437b 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx +++ b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx @@ -18,6 +18,7 @@ import { useAcrePoints } from "#/hooks" import Spinner from "#/components/shared/Spinner" import { IconInfoCircle } from "@tabler/icons-react" import UserDataSkeleton from "#/components/shared/UserDataSkeleton" +import useDebounce from "#/hooks/useDebounce" export default function AcrePointsCard(props: CardProps) { const { @@ -30,6 +31,8 @@ export default function AcrePointsCard(props: CardProps) { isCalculationInProgress, } = useAcrePoints() + const debouncedClaimPoints = useDebounce(claimPoints, 1000) + const formattedTotalPointsAmount = numberToLocaleString(totalBalance) const formattedClaimablePointsAmount = numberToLocaleString(claimableBalance) @@ -101,7 +104,7 @@ export default function AcrePointsCard(props: CardProps) { {claimableBalance && (