fix: reduce interval + remove Skeleton

src/components/dashboard/RecoveryInProgress/index.test.tsx

@@ -36,7 +36,7 @@ describe('RecoveryInProgress', () => {
       <_RecoveryInProgress
         supportsRecovery={false}
         blockTimestamp={0}
-        recoverySlice={{ loading: false, data: [{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState }}
+        recovery={[{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState}
       />,
     )
 
@@ -46,33 +46,21 @@ describe('RecoveryInProgress', () => {
   it('should return a loader if there is no block timestamp', () => {
     const result = render(
       <_RecoveryInProgress
-        supportsRecovery={true}
+        supportsRecovery={false}
         blockTimestamp={undefined}
-        recoverySlice={{ loading: false, data: [{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState }}
-      />,
-    )
-
-    expect(result.container.getElementsByClassName('MuiSkeleton-root').length).toBe(1)
-  })
-
-  it('should return a loader if the recovery proposals are loading', () => {
-    const result = render(
-      <_RecoveryInProgress
-        supportsRecovery={true}
-        blockTimestamp={0}
-        recoverySlice={{ loading: true, data: [{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState }}
+        recovery={[{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState}
       />,
     )
 
-    expect(result.container.getElementsByClassName('MuiSkeleton-root').length).toBe(1)
+    expect(result.container).toBeEmptyDOMElement()
   })
 
   it('should return null if there are no delayed transactions', () => {
     const result = render(
       <_RecoveryInProgress
         supportsRecovery={true}
         blockTimestamp={69420}
-        recoverySlice={{ loading: false, data: [{ queue: [] as Array<RecoveryQueueItem> }] as RecoveryState }}
+        recovery={[{ queue: [] as Array<RecoveryQueueItem> }] as RecoveryState}
       />,
     )
 
@@ -84,9 +72,8 @@ describe('RecoveryInProgress', () => {
       <_RecoveryInProgress
         supportsRecovery={true}
         blockTimestamp={69420}
-        recoverySlice={{
-          loading: false,
-          data: [
+        recovery={
+          [
             {
               queue: [
                 {
@@ -96,8 +83,8 @@ describe('RecoveryInProgress', () => {
                 } as RecoveryQueueItem,
               ],
             },
-          ] as RecoveryState,
-        }}
+          ] as RecoveryState
+        }
       />,
     )
 
@@ -111,9 +98,8 @@ describe('RecoveryInProgress', () => {
       <_RecoveryInProgress
         supportsRecovery={true}
         blockTimestamp={mockBlockTimestamp}
-        recoverySlice={{
-          loading: false,
-          data: [
+        recovery={
+          [
             {
               queue: [
                 {
@@ -129,8 +115,8 @@ describe('RecoveryInProgress', () => {
                 } as RecoveryQueueItem,
               ],
             },
-          ] as RecoveryState,
-        }}
+          ] as RecoveryState
+        }
       />,
     )
 
@@ -157,9 +143,8 @@ describe('RecoveryInProgress', () => {
       <_RecoveryInProgress
         supportsRecovery={true}
         blockTimestamp={mockBlockTimestamp}
-        recoverySlice={{
-          loading: false,
-          data: [
+        recovery={
+          [
             {
               queue: [
                 {
@@ -175,8 +160,8 @@ describe('RecoveryInProgress', () => {
                 } as RecoveryQueueItem,
               ],
             },
-          ] as RecoveryState,
-        }}
+          ] as RecoveryState
+        }
       />,
     )
 

src/components/dashboard/RecoveryInProgress/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, Grid, Skeleton, Typography } from '@mui/material'
+import { Box, Card, Grid, Typography } from '@mui/material'
 import { useMemo } from 'react'
 import type { ReactElement } from 'react'
 
@@ -9,36 +9,27 @@ import RecoveryPending from '@/public/images/common/recovery-pending.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
-import { selectRecoverySlice } from '@/store/recoverySlice'
-import madProps from '@/utils/mad-props'
+import { selectRecovery } from '@/store/recoverySlice'
 import type { RecoveryState } from '@/store/recoverySlice'
-import type { Loadable } from '@/store/common'
+import madProps from '@/utils/mad-props'
 
 export function _RecoveryInProgress({
   blockTimestamp,
   supportsRecovery,
-  recoverySlice,
+  recovery,
 }: {
   blockTimestamp?: number
   supportsRecovery: boolean
-  recoverySlice: Loadable<RecoveryState>
+  recovery: RecoveryState
 }): ReactElement | null {
   const allRecoveryTxs = useMemo(() => {
-    return recoverySlice.data.flatMap(({ queue }) => queue).sort((a, b) => a.timestamp - b.timestamp)
-  }, [recoverySlice.data])
+    return recovery.flatMap(({ queue }) => queue).sort((a, b) => a.timestamp - b.timestamp)
+  }, [recovery])
 
-  if (!supportsRecovery) {
+  if (!supportsRecovery || !blockTimestamp) {
     return null
   }
 
-  if (!blockTimestamp || recoverySlice.loading) {
-    return (
-      <Grid item xs={12}>
-        <Skeleton variant="rounded" height="137px" width="100%" />
-      </Grid>
-    )
-  }
-
   const nonExpiredTxs = allRecoveryTxs.filter((delayedTx) => {
     return delayedTx.expiresAt ? delayedTx.expiresAt.gt(blockTimestamp) : true
   })
@@ -137,11 +128,12 @@ function TimeLeft({ value, unit }: { value: number; unit: string }): ReactElemen
 }
 
 // Appease React TypeScript warnings
+const _useBlockTimestamp = () => useBlockTimestamp(60_000) // Countdown does not display
 const _useSupportsRecovery = () => useHasFeature(FEATURES.RECOVERY)
-const _useRecoverySlice = () => useAppSelector(selectRecoverySlice)
+const _useRecovery = () => useAppSelector(selectRecovery)
 
 export const RecoveryInProgress = madProps(_RecoveryInProgress, {
-  blockTimestamp: useBlockTimestamp,
+  blockTimestamp: _useBlockTimestamp,
   supportsRecovery: _useSupportsRecovery,
-  recoverySlice: _useRecoverySlice,
+  recovery: _useRecovery,
 })

src/hooks/useBlockTimestamp.ts

@@ -4,9 +4,7 @@ import useAsync from './useAsync'
 
 import { useWeb3ReadOnly } from './wallets/web3'
 
-const INTERVAL = 1_000
-
-export function useBlockTimestamp(): number | undefined {
+export function useBlockTimestamp(interval = 1_000): number | undefined {
   const web3ReadOnly = useWeb3ReadOnly()
   const [timestamp, setTimestamp] = useState<number>()
 
@@ -25,12 +23,12 @@ export function useBlockTimestamp(): number | undefined {
       setTimestamp((prev) => {
         return prev ? prev + 1 : block.timestamp
       })
-    }, INTERVAL)
+    }, interval)
 
     return () => {
       clearInterval(timeout)
     }
-  }, [block])
+  }, [interval, block])
 
   return timestamp
 }

src/store/recoverySlice.ts

@@ -1,3 +1,4 @@
+import { createSelector } from '@reduxjs/toolkit'
 import type { TransactionAddedEvent } from '@gnosis.pm/zodiac/dist/cjs/types/Delay'
 import type { BigNumber } from 'ethers'
 
@@ -25,4 +26,4 @@ const { slice, selector } = makeLoadableSlice('recovery', initialState)
 
 export const recoverySlice = slice
 
-export const selectRecoverySlice = selector
+export const selectRecovery = createSelector(selector, (recovery) => recovery.data)