fix: mf-5978 price chart loading status and some other issues (#11950)

Author: swkatmask

packages/plugins/FileService/src/locale/zh-TW.json

@@ -1,10 +1,9 @@
-import { useRef } from 'react'
-import { Stack, Typography } from '@mui/material'
-import { LoadingBase, makeStyles } from '@masknet/theme'
+import { useRef, type HTMLProps } from 'react'
+import { Box, Stack } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
 import { openWindow } from '@masknet/shared-base-ui'
-import { useDimension, usePriceLineChart, type Dimension } from '@masknet/shared'
+import { EmptyStatus, LoadingStatus, useDimension, usePriceLineChart, type Dimension } from '@masknet/shared'
 import type { Coin, Currency, Stat } from '../../types/index.js'
-import { Trans } from '@lingui/macro'
 
 const DEFAULT_DIMENSION: Dimension = {
     top: 32,
@@ -15,20 +14,19 @@ const DEFAULT_DIMENSION: Dimension = {
     height: 190,
 }
 
-const useStyles = makeStyles<PriceChartProps>()((theme, { stats, coin }) => {
+const useStyles = makeStyles()((theme) => {
     return {
         root: {
             position: 'relative',
-            cursor: stats.length && coin?.platform_url ? 'pointer' : 'default',
+        },
+        chart: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
         },
         svg: {
             display: 'block',
         },
-        progress: {
-            position: 'absolute',
-            left: 275,
-            top: 85,
-        },
         placeholder: {
             paddingTop: theme.spacing(10),
             paddingBottom: theme.spacing(10),
@@ -37,7 +35,7 @@ const useStyles = makeStyles<PriceChartProps>()((theme, { stats, coin }) => {
     }
 })
 
-interface PriceChartProps extends withClasses<'root'> {
+interface PriceChartProps extends HTMLProps<HTMLDivElement> {
     coin?: Coin
     currency: Currency
     stats: Stat[]
@@ -49,48 +47,52 @@ interface PriceChartProps extends withClasses<'root'> {
 }
 
 export function PriceChart(props: PriceChartProps) {
-    const { classes } = useStyles(props, { props })
+    const { stats, loading, currency, children, coin, className, ...rest } = props
+    const { classes, cx } = useStyles()
     const rootRef = useRef<HTMLDivElement>(null)
     const svgRef = useRef<SVGSVGElement>(null)
 
     useDimension(svgRef, DEFAULT_DIMENSION)
 
     usePriceLineChart(
         svgRef,
-        props.stats.map(([date, price]) => ({
+        stats.map(([date, price]) => ({
             date: new Date(date),
             value: price,
         })),
         DEFAULT_DIMENSION,
         'x-trader-price-line-chart',
-        { sign: props.currency.name ?? 'USD' },
+        { sign: currency.name ?? 'USD' },
     )
 
     return (
-        <div className={classes.root} ref={rootRef}>
-            {props.loading && props.stats.length ?
-                <LoadingBase className={classes.progress} color="primary" size={15} />
-            :   null}
-
+        <Box
+            className={cx(classes.root, className)}
+            {...rest}
+            ref={rootRef}
+            sx={{
+                cursor: stats.length && coin?.platform_url ? 'pointer' : 'default',
+            }}>
             <Stack gap={2}>
-                {props.stats.length ?
-                    <svg
-                        className={classes.svg}
-                        ref={svgRef}
-                        width={DEFAULT_DIMENSION.width}
-                        height={DEFAULT_DIMENSION.height}
-                        viewBox={`0 0 ${DEFAULT_DIMENSION.width} ${DEFAULT_DIMENSION.height}`}
-                        preserveAspectRatio="xMidYMid meet"
-                        onClick={() => {
-                            props.stats.length && openWindow(props.coin?.platform_url)
-                        }}
-                    />
-                :   <Typography className={classes.placeholder} align="center" color="textSecondary">
-                        <Trans>No Data</Trans>
-                    </Typography>
-                }
-                {props.children}
+                <Box className={classes.chart} height={DEFAULT_DIMENSION.height}>
+                    {loading ?
+                        <LoadingStatus iconSize={36} />
+                    : stats.length ?
+                        <svg
+                            className={classes.svg}
+                            ref={svgRef}
+                            width={DEFAULT_DIMENSION.width}
+                            height={DEFAULT_DIMENSION.height}
+                            viewBox={`0 0 ${DEFAULT_DIMENSION.width} ${DEFAULT_DIMENSION.height}`}
+                            preserveAspectRatio="xMidYMid meet"
+                            onClick={() => {
+                                stats.length && openWindow(coin?.platform_url)
+                            }}
+                        />
+                    :   <EmptyStatus className={classes.placeholder} />}
+                </Box>
+                {children}
             </Stack>
-        </div>
+        </Box>
     )
 }

packages/plugins/FileService/src/locale/zh-TW.po

@@ -1,33 +1,33 @@
-import { useEffect, useMemo, useState, useContext, useCallback, useLayoutEffect } from 'react'
-import { compact, first } from 'lodash-es'
-import { TabContext } from '@mui/lab'
-import { Box, useTheme } from '@mui/system'
-import { Stack, Tab, ThemeProvider } from '@mui/material'
+import { Trans } from '@lingui/macro'
 import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
-import { useChainContext } from '@masknet/web3-hooks-base'
-import { ChainId } from '@masknet/web3-shared-evm'
-import { SourceType, TokenType } from '@masknet/web3-shared-base'
-import type { Web3Helper } from '@masknet/web3-helpers'
 import { NFTList, PluginCardFrameMini, PluginEnableBoundary } from '@masknet/shared'
-import { EMPTY_LIST, PluginID, NetworkPluginID, type SocialIdentity, Days } from '@masknet/shared-base'
+import { Days, EMPTY_LIST, NetworkPluginID, PluginID, type SocialIdentity } from '@masknet/shared-base'
 import { useRenderPhraseCallbackOnDepsChange } from '@masknet/shared-base-ui'
 import { makeStyles, MaskLightTheme, MaskTabList, useTabs } from '@masknet/theme'
+import type { Web3Helper } from '@masknet/web3-helpers'
+import { useChainContext } from '@masknet/web3-hooks-base'
 import type { TrendingAPI } from '@masknet/web3-providers/types'
+import { SourceType, TokenType } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { Telemetry } from '@masknet/web3-telemetry'
-import { EventType, EventID } from '@masknet/web3-telemetry/types'
-import { TrendingViewContext } from './context.js'
+import { EventID, EventType } from '@masknet/web3-telemetry/types'
+import { TabContext } from '@mui/lab'
+import { Stack, Tab, ThemeProvider } from '@mui/material'
+import { Box, useTheme } from '@mui/system'
+import { compact, first } from 'lodash-es'
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { usePriceStats } from '../../trending/usePriceStats.js'
 import { useTrendingById } from '../../trending/useTrending.js'
+import { ContentTab } from '../../types/index.js'
 import { CoinMarketPanel } from './CoinMarketPanel.js'
+import { TrendingViewContext } from './context.js'
+import { FailedTrendingView } from './FailedTrendingView.js'
+import { NonFungibleTickersTable } from './NonFungibleTickersTable.js'
 import { PriceChart } from './PriceChart.js'
 import { DEFAULT_RANGE_OPTIONS, PriceChartDaysControl } from './PriceChartDaysControl.js'
 import { TickersTable } from './TickersTable.js'
 import { TrendingViewDeck } from './TrendingViewDeck.js'
-import { NonFungibleTickersTable } from './NonFungibleTickersTable.js'
 import { TrendingViewSkeleton } from './TrendingViewSkeleton.js'
-import { ContentTab } from '../../types/index.js'
-import { FailedTrendingView } from './FailedTrendingView.js'
-import { Trans } from '@lingui/macro'
 
 const useStyles = makeStyles<{
     isTokenTagPopper: boolean
@@ -58,12 +58,7 @@ const useStyles = makeStyles<{
             props.isCollectionProjectPopper ?
                 {
                     minHeight: 374,
-                    maxHeight:
-                        props.isCollectionProjectPopper ?
-                            props.currentTab === ContentTab.Price ?
-                                450
-                            :   374
-                        :   'unset',
+                    maxHeight: props.currentTab === ContentTab.Price ? 450 : 374,
                     overflow: 'hidden',
                     display: 'flex',
                     flexDirection: 'column',
@@ -290,7 +285,6 @@ export function TrendingView(props: TrendingViewProps) {
                 cardHeader: classes.cardHeader,
             }}
             currentTab={currentTab}
-            stats={stats}
             identity={identity}
             setActive={setActive}
             setResult={setResult}
@@ -347,7 +341,7 @@ export function TrendingView(props: TrendingViewProps) {
                 {currentTab === ContentTab.Price ?
                     <Box className={classes.priceChartWrapper}>
                         <PriceChart
-                            classes={{ root: classes.priceChartRoot }}
+                            className={classes.priceChartRoot}
                             coin={coin}
                             amount={currentPriceChange ?? trending.market?.price_change_percentage_24h_in_currency ?? 0}
                             currency={trending.currency}

packages/plugins/Trader/src/SiteAdaptor/trending/PriceChart.tsx

@@ -43,7 +43,7 @@ import {
 } from '@mui/material'
 import { first } from 'lodash-es'
 import { useCallback, useContext, useEffect, useRef, useState } from 'react'
-import { ContentTab, type Currency, type Stat } from '../../types/index.js'
+import { ContentTab, type Currency } from '../../types/index.js'
 import { CoinIcon } from './CoinIcon.js'
 import { TrendingCard, type TrendingCardProps } from './TrendingCard.js'
 import { TrendingViewDescriptor } from './TrendingViewDescriptor.js'
@@ -156,7 +156,6 @@ const useStyles = makeStyles<{
 })
 
 interface TrendingViewDeckProps extends withClasses<'header' | 'body' | 'footer' | 'content' | 'cardHeader'> {
-    stats: Stat[]
     currency: Currency
     currentTab: ContentTab
     trending: TrendingAPI.Trending
@@ -173,7 +172,6 @@ interface TrendingViewDeckProps extends withClasses<'header' | 'body' | 'footer'
 export function TrendingViewDeck(props: TrendingViewDeckProps) {
     const {
         trending,
-        stats,
         children,
         TrendingCardProps,
         resultList = EMPTY_LIST,