From b05e5db07bcff99ed2c606069bffb0499d3e6902 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Wed, 24 Jan 2024 19:58:35 +0700
Subject: [PATCH] fix: race condition for loading state

---
 src/components/leaderboard/common/LeaderboardTable.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/leaderboard/common/LeaderboardTable.tsx b/src/components/leaderboard/common/LeaderboardTable.tsx
index c290f8ba5..f8712e072 100644
--- a/src/components/leaderboard/common/LeaderboardTable.tsx
+++ b/src/components/leaderboard/common/LeaderboardTable.tsx
@@ -1,7 +1,7 @@
 import { Button, Skeleton } from 'antd'
 import clsx from 'clsx'
 import Link from 'next/link'
-import { ComponentProps, useEffect, useMemo, useState } from 'react'
+import { ComponentProps, useEffect, useMemo, useRef, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useFetchProfileSpaces, useSelectProfile } from 'src/rtk/app/hooks'
 import { useAppDispatch } from 'src/rtk/app/store'
@@ -154,6 +154,8 @@ function LeaderboardTableModal({
   const { data, hasMore } = useGetLeaderboardData(role)
   const { subsocial } = useSubsocialApi()
   const dispatch = useAppDispatch()
+
+  const currentPageLoading = useRef(0)
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
@@ -164,11 +166,14 @@ function LeaderboardTableModal({
     const { payload } = (await dispatch(fetchLeaderboardData({ role }))) as {
       payload: LeaderboardData
     }
+    // prevent race condition
+    currentPageLoading.current += 1
+    const currentPage = currentPageLoading.current
     setIsLoading(true)
     await dispatch(
       fetchProfileSpaces({ ids: payload.data.map(({ address }) => address), api: subsocial }),
     )
-    setIsLoading(false)
+    if (currentPage === currentPageLoading.current) setIsLoading(false)
   }
 
   let wording = {