Merge pull request #1614 from mars-protocol/develop

Author: Patricie29

src/components/common/Icons/MarsFragments.svg

@@ -28,10 +28,10 @@ export { default as Discord } from 'components/common/Icons/Discord.svg'
 export { default as Droplet } from 'components/common/Icons/Droplet.svg'
 export { default as Edit } from 'components/common/Icons/Edit.svg'
 export { default as Enter } from 'components/common/Icons/Enter.svg'
-export { default as Eye } from 'components/common/Icons/Eye.svg'
 export { default as ExclamationMarkCircled } from 'components/common/Icons/ExclamationMarkCircled.svg'
 export { default as ExclamationMarkTriangle } from 'components/common/Icons/ExclamationMarkTriangle.svg'
 export { default as ExternalLink } from 'components/common/Icons/ExternalLink.svg'
+export { default as Eye } from 'components/common/Icons/Eye.svg'
 export { default as Flag } from 'components/common/Icons/Flag.svg'
 export { default as Gear } from 'components/common/Icons/Gear.svg'
 export { default as GridGlobe } from 'components/common/Icons/GridGlobe.svg'
@@ -49,6 +49,7 @@ export { default as LockLocked } from 'components/common/Icons/LockLocked.svg'
 export { default as LockUnlocked } from 'components/common/Icons/LockUnlocked.svg'
 export { default as Logo } from 'components/common/Icons/Logo.svg'
 export { default as Luggage } from 'components/common/Icons/Luggage.svg'
+export { default as MarsFragments } from 'components/common/Icons/MarsFragments.svg'
 export { default as MarsProtocol } from 'components/common/Icons/MarsProtocol.svg'
 export { default as MilkyWay } from 'components/common/Icons/MilkyWay.svg'
 export { default as Neutron } from 'components/common/Icons/Neutron.svg'

src/components/common/Icons/index.ts

@@ -49,10 +49,7 @@ export default function AvailableCommunityVaults() {
     return tabs
   }, [data.depositedVaults, data.ownedVaults, isLoading])
 
-  const hasNoVaults =
-    !data.ownedVaults.length && !data.depositedVaults.length && !data.availableVaults.length
-
-  if (isLoading || hasNoVaults) {
+  if (isLoading) {
     return (
       <div className='flex justify-center w-full mt-10'>
         <CircularProgress size={50} />

src/components/managedVaults/table/AvailableCommunityVaults.tsx

@@ -4,8 +4,8 @@ import { useManagedVaultDeposits } from 'hooks/managedVaults/useManagedVaultDepo
 import { useDepositedManagedVaultsFallback } from 'hooks/managedVaults/useDepositedManagedVaultsFallback'
 import useChainConfig from 'hooks/chain/useChainConfig'
 import useStore from 'store'
-import useSWR from 'swr'
-import { useMemo } from 'react'
+import useSWR, { mutate } from 'swr'
+import { useEffect, useMemo, useState } from 'react'
 import BN from 'bignumber.js'
 
 export default function useManagedVaults() {
@@ -121,30 +121,55 @@ export default function useManagedVaults() {
     },
     {
       revalidateOnFocus: false,
-      refreshInterval: 60_000,
       suspense: false,
+      refreshInterval: (latestData) => {
+        if (
+          Array.isArray(latestData) &&
+          (latestData.length === 0 ||
+            !latestData.some((vault) => BN(vault.base_tokens_amount).isGreaterThan(0)))
+        ) {
+          return 2000 // 2 seconds if empty
+        }
+        return 120000 // else 120 seconds
+      },
     },
   )
 
-  const vaultDeposits = useManagedVaultDeposits(address, vaultsResponse ?? [])
+  // Add local state for last valid (non-empty) vaults
+  const [lastValidVaults, setLastValidVaults] = useState<ManagedVaultWithDetails[]>([])
+  useEffect(() => {
+    if (
+      vaultsResponse &&
+      vaultsResponse.length > 0 &&
+      vaultsResponse.some((vault) => BN(vault.base_tokens_amount).isGreaterThan(0))
+    ) {
+      setLastValidVaults(vaultsResponse)
+    }
+  }, [vaultsResponse])
+
+  // Use last valid data if current response is empty or returns no funded vaults
+  const dataToUse =
+    vaultsResponse &&
+    vaultsResponse.length > 0 &&
+    vaultsResponse.some((vault) => BN(vault.base_tokens_amount).isGreaterThan(0))
+      ? vaultsResponse
+      : lastValidVaults
+
+  const vaultDeposits = useManagedVaultDeposits(address, dataToUse ?? [])
   const result = useMemo(() => {
-    if (error || !vaultsResponse || vaultsResponse.length === 0) {
+    if (error || !dataToUse || dataToUse.length === 0) {
       return {
         ownedVaults: fallbackUserVaults.filter((vault) => vault.isOwner) || [],
         depositedVaults: fallbackUserVaults.filter((vault) => !vault.isOwner) || [],
         availableVaults: [],
       }
     }
-
     // Filter out unfunded vaults (those with zero total_base_tokens) for available vaults table
-    const fundedVaults = vaultsResponse.filter((vault) =>
-      BN(vault.base_tokens_amount).isGreaterThan(0),
-    )
-
+    const fundedVaults = dataToUse.filter((vault) => BN(vault.base_tokens_amount).isGreaterThan(0))
     return {
-      ownedVaults: address ? vaultsResponse.filter((vault) => vault.isOwner) : [],
+      ownedVaults: address ? dataToUse.filter((vault) => vault.isOwner) : [],
       depositedVaults: address
-        ? vaultsResponse.filter(
+        ? dataToUse.filter(
             (vault) => !vault.isOwner && vaultDeposits.get(vault.vault_tokens_denom) === true,
           )
         : [],
@@ -154,10 +179,10 @@ export default function useManagedVaults() {
           )
         : fundedVaults,
     }
-  }, [vaultsResponse, vaultDeposits, address, error, fallbackUserVaults])
+  }, [dataToUse, vaultDeposits, address, error, fallbackUserVaults])
 
   return {
     data: result,
-    isLoading: isLoading || isFallbackLoading,
+    isLoading: (isLoading || isFallbackLoading) && dataToUse.length === 0,
   }
 }