Fix Top Users not rendering

src/components/creators/TopUsersCard.tsx

@@ -1,7 +1,7 @@
 import { Skeleton } from 'antd'
 import clsx from 'clsx'
-import { ComponentProps, CSSProperties } from 'react'
-import { useSelectProfileSpace, useSelectSpace } from 'src/rtk/app/hooks'
+import { ComponentProps, CSSProperties, useMemo } from 'react'
+import { useFetchProfileSpaces, useSelectProfileSpace, useSelectSpace } from 'src/rtk/app/hooks'
 import { useFetchTopUsers } from 'src/rtk/features/activeStaking/hooks'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { SpaceAvatar } from '../spaces/helpers'
@@ -15,7 +15,15 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
   const { data, loading } = useFetchTopUsers()
   const isMobile = useIsMobileWidthOrDevice()
 
-  const isLoading = loading || !data
+  const args = useMemo(
+    () => ({
+      ids: [...(data?.stakers ?? []), ...(data?.creators ?? [])].map(({ address }) => address),
+    }),
+    [data],
+  )
+  const { loading: loadingSpaces } = useFetchProfileSpaces(args)
+
+  const isLoading = loading || !data || loadingSpaces
 
   // const seeMoreButton = (
   //   <Button

src/rtk/app/wrappers.ts

@@ -217,14 +217,18 @@ export function createSimpleFetchWrapper<Args, ReturnValue>({
         if (fetchedData && !shouldFetchCondition?.(fetchedData)) return fetchedData
       }
 
-      const promise = fetchData(allArgs, getState(), dispatch)
-      currentlyFetchingMap.set(id, promise)
-      const res = await promise
-
-      await dispatch(saveToCacheAction(res))
-      currentlyFetchingMap.delete(id)
+      try {
+        const promise = fetchData(allArgs, getState(), dispatch)
+        currentlyFetchingMap.set(id, promise)
+        const res = await promise
 
-      return promise
+        await dispatch(saveToCacheAction(res))
+        return promise
+      } catch (err) {
+        throw err
+      } finally {
+        currentlyFetchingMap.delete(id)
+      }
     },
   )
 }

src/rtk/features/activeStaking/topUsersSlice.ts

@@ -16,7 +16,7 @@ const sliceName = 'topUsers'
 
 export const selectTopUsers = (state: RootState) => state.topUsers
 
-export const fetchTopUsers = createSimpleFetchWrapper<null, TopUsers | null>({
+export const fetchTopUsers = createSimpleFetchWrapper<{}, TopUsers | null>({
   sliceName,
   fetchData: async function () {
     const data = await getTopUsers()
@@ -31,13 +31,16 @@ export async function fetchTopUsersWithSpaces(
   dispatch: AppDispatch,
   api: SubsocialApi,
 ) {
-  await dispatch(fetchTopUsers())
+  console.log('fetching top users...')
+  await dispatch(fetchTopUsers({ reload: true }))
   const state = selectTopUsers(store.getState())
+  console.log('dont have state?', !state)
   if (!state) return
 
   const parsedState = state as TopUsers
   const creators = parsedState.creators.map(user => user.address)
   const stakers = parsedState.stakers.map(user => user.address)
+  console.log('fetching profiles', [...creators, ...stakers])
 
   await dispatch(fetchProfileSpaces({ ids: [...creators, ...stakers], api }))
 }