fix spot market change

components/MangoProvider.tsx

@@ -17,13 +17,6 @@ const rehydrateStore = async () => {
 const HydrateStore = () => {
   const actions = mangoStore((s) => s.actions)
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-  const serumMarkets = mangoStore((s) => s.serumMarkets)
-
-  useEffect(() => {
-    if (serumMarkets.length) {
-      actions.fetchSerumMarketPrices()
-    }
-  }, [actions, serumMarkets])
 
   useInterval(() => {
     rehydrateStore()

components/stats/SpotMarketsTable.tsx

@@ -11,6 +11,7 @@ import ContentBox from '../shared/ContentBox'
 import Change from '../shared/Change'
 import MarketLogos from '@components/trade/MarketLogos'
 import dynamic from 'next/dynamic'
+import SheenLoader from '@components/shared/SheenLoader'
 const SimpleAreaChart = dynamic(
   () => import('@components/shared/SimpleAreaChart'),
   { ssr: false }
@@ -63,7 +64,7 @@ const SpotMarketsTable = () => {
                     chartData[0].value) /
                     chartData[0].value) *
                   100
-                : 0
+                : 'unavailable'
 
               return (
                 <tr key={market.publicKey.toString()}>
@@ -103,8 +104,14 @@ const SpotMarketsTable = () => {
                   </td>
                   <td>
                     <div className="flex flex-col items-end">
-                      {change ? (
+                      {change !== 'unavailable' ? (
+                        loadingSerumMarketPrices ? (
+                          <SheenLoader>
+                            <div className="h-5 w-12 rounded bg-th-bkg-2" />
+                          </SheenLoader>
+                        ) : (
                           <Change change={change} />
+                        )
                       ) : (
                         <p className="text-th-fgd-4">{t('unavailable')}</p>
                       )}

components/trade/AdvancedMarketHeader.tsx

@@ -136,6 +136,14 @@ const AdvancedMarketHeader = () => {
   const { t } = useTranslation(['common', 'trade'])
   const selectedMarket = mangoStore((s) => s.selectedMarket.current)
   const serumMarketPrices = mangoStore((s) => s.serumMarketPrices.data)
+  const actions = mangoStore((s) => s.actions)
+  const serumMarkets = mangoStore((s) => s.serumMarkets)
+
+  useEffect(() => {
+    if (serumMarkets.length) {
+      actions.fetchSerumMarketPrices()
+    }
+  }, [actions, serumMarkets])
 
   const marketPrices = useMemo(() => {
     if (selectedMarket instanceof Serum3Market) {
@@ -147,7 +155,7 @@ const AdvancedMarketHeader = () => {
       return prices
     }
     // need to handle perp
-  }, [selectedMarket])
+  }, [selectedMarket, serumMarketPrices])
 
   const change = useMemo(() => {
     if (marketPrices) {