fix: show a loading state of the trading chart (#610)

* fix: show a loading state of the trading chart

* tidy: refactor

src/components/Trade/TradeChart/TVChartContainer.tsx

@@ -106,7 +106,7 @@ export const TVChartContainer = (props: Props) => {
 
   return (
     <Card title='Trading Chart' contentClassName='px-0.5 pb-0.5 h-full'>
-      <div ref={chartContainerRef} className='h-full' />
+      <div ref={chartContainerRef} className='h-full overflow-hidden rounded-b-base' />
     </Card>
   )
 }

src/components/Trade/TradeChart/index.tsx

@@ -2,6 +2,9 @@ import dynamic from 'next/dynamic'
 import Script from 'next/script'
 import { useState } from 'react'
 
+import { CircularProgress } from 'components/CircularProgress'
+import Card from 'components/Card'
+
 const TVChartContainer = dynamic(
   () => import('components/Trade/TradeChart/TVChartContainer').then((mod) => mod.TVChartContainer),
   { ssr: false },
@@ -24,7 +27,15 @@ export default function TradeChart(props: Props) {
           setIsScriptReady(true)
         }}
       />
-      {isScriptReady && <TVChartContainer buyAsset={props.buyAsset} sellAsset={props.sellAsset} />}
+      {isScriptReady ? (
+        <TVChartContainer buyAsset={props.buyAsset} sellAsset={props.sellAsset} />
+      ) : (
+        <Card title='Trading Chart' contentClassName='px-0.5 pb-0.5 h-full'>
+          <div className='flex items-center justify-center w-full h-full rounded-b-base bg-chart'>
+            <CircularProgress size={60} className='opacity-50' />
+          </div>
+        </Card>
+      )}
     </>
   )
 }

tailwind.config.js

@@ -85,6 +85,7 @@ module.exports = {
         axlusdc: '#478edc',
         body: '#0D0012',
         'body-dark': '#141621',
+        chart: '#220e1d',
         error: '#F04438',
         'error-bg': '#FDA29B',
         green: '#039855',