feat: reduce Dashboard layout shifts (#3611)

VenusProtocol · Dec 12, 2024 · 125e3df · 125e3df
1 parent 1477974
commit 125e3df
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/.changeset/weak-rocks-attend.md b/.changeset/weak-rocks-attend.md
@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+reduce Dashboard layout shifts
diff --git a/apps/evm/src/clients/api/queries/getIsolatedPools/useGetIsolatedPools.ts b/apps/evm/src/clients/api/queries/getIsolatedPools/useGetIsolatedPools.ts
@@ -1,4 +1,4 @@
-import { type QueryObserverOptions, useQuery } from '@tanstack/react-query';
+import { type QueryObserverOptions, keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import { useGetApiPools } from 'clients/api';
 import getIsolatedPools, {
@@ -93,6 +93,7 @@ const useGetIsolatedPools = (input?: TrimmedInput, options?: Options) => {
       ),
 
     refetchInterval,
+    placeholderData: keepPreviousData,
     ...options,
     enabled: isQueryEnabled,
   });

diff --git a/apps/evm/src/clients/api/queries/getLegacyPool/useGetLegacyPool.ts b/apps/evm/src/clients/api/queries/getLegacyPool/useGetLegacyPool.ts
@@ -1,4 +1,4 @@
-import { type QueryObserverOptions, useQuery } from '@tanstack/react-query';
+import { type QueryObserverOptions, keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import getLegacyPool, {
   type GetLegacyPoolInput,
@@ -109,6 +109,7 @@ const useGetLegacyPool = (input?: TrimmedInput, options?: Partial<Options>) => {
           }),
       ),
     refetchInterval,
+    placeholderData: keepPreviousData,
     ...options,
     enabled: isQueryEnabled,
   });

diff --git a/apps/evm/src/pages/Dashboard/Banner/index.tsx b/apps/evm/src/pages/Dashboard/Banner/index.tsx
@@ -8,7 +8,7 @@ import { store } from './store';
 export const Banner: React.FC = () => {
   const { accountAddress } = useAccountAddress();
 
-  const { data: getPrimeTokenData, isLoading: isGetPrimeTokenLoading } = useGetPrimeToken({
+  const { data: getPrimeTokenData } = useGetPrimeToken({
     accountAddress,
   });
   const isAccountPrime = !!getPrimeTokenData?.exists;
@@ -22,10 +22,7 @@ export const Banner: React.FC = () => {
 
   const canShowPrimePromotionalBanner = isPrimeEnabled && storeShouldShowPrimePromotionalBanner;
 
-  if (
-    canShowPrimePromotionalBanner &&
-    ((!isAccountPrime && !isGetPrimeTokenLoading) || !accountAddress)
-  ) {
+  if (canShowPrimePromotionalBanner && (!isAccountPrime || !accountAddress)) {
     return <PrimePromotionalBanner onHide={hidePrimePromotionalBanner} />;
   }