feat: Add Suspense to lazy components

DODOEX · Oct 30, 2024 · 7107e43 · 7107e43
1 parent a15b214
commit 7107e43
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 33 deletions.
diff --git a/packages/dodoex-widgets/package.json b/packages/dodoex-widgets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/widgets",
-  "version": "3.0.0-taiko.39",
+  "version": "3.0.0-taiko.40",
   "description": "DODO Widgets",
   "source": "src/index.tsx",
   "types": "dist/types/index.d.ts",

diff --git a/packages/dodoex-widgets/src/locales/en-US.po b/packages/dodoex-widgets/src/locales/en-US.po
@@ -468,7 +468,7 @@ msgstr "Done"
 msgid "Results in a relatively fixed price."
 msgstr "Results in a relatively fixed price."
 
-#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:196
+#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:205
 msgid "Swap Rate"
 msgstr "Swap Rate"
 
@@ -493,7 +493,7 @@ msgstr "Token Pair Mining"
 msgid "Address"
 msgstr "Address"
 
-#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:210
+#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:219
 msgid "The area of the chart indicates the buy/sell volume of {baseSymbol} that can be carried by the market when the current price changes to the hover price."
 msgstr "The area of the chart indicates the buy/sell volume of {baseSymbol} that can be carried by the market when the current price changes to the hover price."
 

diff --git a/packages/dodoex-widgets/src/locales/zh-CN.po b/packages/dodoex-widgets/src/locales/zh-CN.po
@@ -468,7 +468,7 @@ msgstr ""
 msgid "Results in a relatively fixed price."
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:196
+#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:205
 msgid "Swap Rate"
 msgstr ""
 
@@ -493,7 +493,7 @@ msgstr ""
 msgid "Address"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:210
+#: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:219
 msgid "The area of the chart indicates the buy/sell volume of {baseSymbol} that can be carried by the market when the current price changes to the hover price."
 msgstr ""
 

diff --git a/...es/dodoex-widgets/src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx b/...es/dodoex-widgets/src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx
@@ -126,15 +126,48 @@ export default function DepthAndLiquidityChart({
         </Box>
         <TabPanel value={DepthTab.depth}>
           {chartWidth && (
-            <DepthChart
+            <React.Suspense>
+              <DepthChart
+                width={chartWidth}
+                height={isMobile ? 261 : 364}
+                chartId="create-pool-depth-chart"
+                baseTokenSymbol={baseSymbol}
+                quoteTokenSymbol={quoteSymbol}
+                pmmModel={pmmModel}
+                pmmParams={pmmParams}
+                midPrice={midPrice}
+                colorMap={{
+                  grid: theme.palette.mode === 'light' ? '#E4E4E4' : undefined,
+                  midPriceLine:
+                    theme.palette.mode === 'light' ? '#E4E4E4' : undefined,
+                  leftBg: [0, alpha(leftColor, 0.04), 1, alpha(leftColor, 0.3)],
+                  leftLine: leftColor,
+                  rightBg: [
+                    0,
+                    alpha(rightColor, 0.04),
+                    1,
+                    alpha(rightColor, 0.3),
+                  ],
+                  rightLine: rightColor,
+                  tooltipBg: theme.palette.background.paperContrast,
+                  tooltipColor: theme.palette.text.primary,
+                }}
+                notShowAmountInput={isMobile}
+              />
+            </React.Suspense>
+          )}
+        </TabPanel>
+        <TabPanel value={DepthTab.liquidity}>
+          <React.Suspense>
+            <LiquidityChart
               width={chartWidth}
               height={isMobile ? 261 : 364}
-              chartId="create-pool-depth-chart"
               baseTokenSymbol={baseSymbol}
               quoteTokenSymbol={quoteSymbol}
               pmmModel={pmmModel}
               pmmParams={pmmParams}
               midPrice={midPrice}
+              notShowTipText
               colorMap={{
                 grid: theme.palette.mode === 'light' ? '#E4E4E4' : undefined,
                 midPriceLine:
@@ -150,34 +183,10 @@ export default function DepthAndLiquidityChart({
                 rightLine: rightColor,
                 tooltipBg: theme.palette.background.paperContrast,
                 tooltipColor: theme.palette.text.primary,
+                textColor: theme.palette.text.secondary,
               }}
-              notShowAmountInput={isMobile}
             />
-          )}
-        </TabPanel>
-        <TabPanel value={DepthTab.liquidity}>
-          <LiquidityChart
-            width={chartWidth}
-            height={isMobile ? 261 : 364}
-            baseTokenSymbol={baseSymbol}
-            quoteTokenSymbol={quoteSymbol}
-            pmmModel={pmmModel}
-            pmmParams={pmmParams}
-            midPrice={midPrice}
-            notShowTipText
-            colorMap={{
-              grid: theme.palette.mode === 'light' ? '#E4E4E4' : undefined,
-              midPriceLine:
-                theme.palette.mode === 'light' ? '#E4E4E4' : undefined,
-              leftBg: [0, alpha(leftColor, 0.04), 1, alpha(leftColor, 0.3)],
-              leftLine: leftColor,
-              rightBg: [0, alpha(rightColor, 0.04), 1, alpha(rightColor, 0.3)],
-              rightLine: rightColor,
-              tooltipBg: theme.palette.background.paperContrast,
-              tooltipColor: theme.palette.text.primary,
-              textColor: theme.palette.text.secondary,
-            }}
-          />
+          </React.Suspense>
         </TabPanel>
       </Tabs>
       <Box