mount before rendering dates

blockworks-foundation · Dec 18, 2023 · 0a868de · 0a868de · vercel · Dec 18, 2023
1 parent fbc4559
commit 0a868de
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/app/components/explore/token-page/TokenInfo.tsx b/app/components/explore/token-page/TokenInfo.tsx
@@ -13,6 +13,7 @@ import {
 } from '@heroicons/react/20/solid'
 import Link from 'next/link'
 import { BirdeyeOverviewData } from '../../../types/birdeye'
+import SheenLoader from '../../shared/SheenLoader'
 dayjs.extend(relativeTime)
 
 const TokenInfo = ({
@@ -36,6 +37,17 @@ const TokenInfo = ({
     setTimeout(() => setCopied(false), 2000)
   }, [copied])
 
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted)
+    return (
+      <SheenLoader className="flex flex-1">
+        <div
+          className={`h-[264px] lg:h-[344px] w-full rounded-lg bg-th-bkg-2`}
+        />
+      </SheenLoader>
+    )
+
   return (
     <>
       <h2 className="text-base mb-2">Info and stats</h2>
@@ -117,14 +129,14 @@ const TokenInfo = ({
                     </span>
                   ) : null}
                 </span>
-                {/* {coingeckoData?.market_data?.ath_date?.usd ? (
+                {coingeckoData?.market_data?.ath_date?.usd ? (
                   <span className="text-xs text-th-fgd-4 text-right">
                     {dayjs(coingeckoData.market_data.ath_date.usd).format(
                       'DD MMM YYYY',
                     )}{' '}
                     ({dayjs().to(coingeckoData.market_data.ath_date.usd)})
                   </span>
-                ) : null} */}
+                ) : null}
               </span>
             ) : (
               '–'
@@ -154,14 +166,14 @@ const TokenInfo = ({
                     </span>
                   ) : null}
                 </span>
-                {/* {coingeckoData?.market_data?.atl_date?.usd ? (
+                {coingeckoData?.market_data?.atl_date?.usd ? (
                   <span className="text-xs text-th-fgd-4 text-right">
                     {dayjs(coingeckoData.market_data.atl_date.usd).format(
                       'DD MMM YYYY',
                     )}{' '}
                     ({dayjs().to(coingeckoData.market_data.atl_date.usd)})
                   </span>
-                ) : null} */}
+                ) : null}
               </span>
             ) : (
               '–'

diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo