fix: buy now && collectible loading in the container

packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx

@@ -41,28 +41,28 @@ export function ActionBar(props: ActionBarProps) {
     } = useControlledDialog()
 
     if (!asset.value) return null
-
     return (
         <Box className={classes.root} sx={{ marginTop: 1 }} display="flex" justifyContent="center">
-            {!asset.value.is_owner && asset.value.is_auction ? (
+            {!asset.value.is_owner && asset.value.is_auction && assetOrder.value ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
-                    fullWidth
                     variant="contained"
-                    onClick={onOpenOfferDialog}>
-                    {t('plugin_collectible_place_bid')}
+                    onClick={onOpenCheckoutDialog}>
+                    {t('plugin_collectible_buy_now')}
                 </ActionButton>
             ) : null}
-            {!asset.value.is_owner && !asset.value.is_auction && assetOrder.value ? (
+            {!asset.value.is_owner && asset.value.is_auction ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
+                    fullWidth
                     variant="contained"
-                    onClick={onOpenCheckoutDialog}>
-                    {t('plugin_collectible_buy_now')}
+                    onClick={onOpenOfferDialog}>
+                    {t('plugin_collectible_place_bid')}
                 </ActionButton>
             ) : null}
+
             {!asset.value.is_owner && !asset.value.is_auction ? (
                 <ActionButton
                     className={classes.button}

packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { ReactElement, useCallback } from 'react'
 import {
     Avatar,
     Box,
@@ -29,7 +29,6 @@ import { HistoryTab } from './HistoryTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleCard } from './CollectibleCard'
 import { CollectibleProviderIcon } from './CollectibleProviderIcon'
-import { PluginSkeleton } from './PluginSkeleton'
 import { CollectibleProvider, CollectibleTab } from '../types'
 import { currentCollectibleProviderSettings } from '../settings'
 import { MaskTextIcon } from '../../../resources/MaskIcon'
@@ -38,6 +37,7 @@ import { ActionBar } from './ActionBar'
 import { useChainId } from '@masknet/web3-shared-evm'
 import { getEnumAsArray } from '@dimensiondev/kit'
 import { FootnoteMenu, FootnoteMenuOption } from '../../Trader/SNSAdaptor/trader/FootnoteMenu'
+import { LoadingAnimation } from '@masknet/shared'
 import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 
 const useStyles = makeStyles()((theme) => {
@@ -131,6 +131,13 @@ const useStyles = makeStyles()((theme) => {
             backgroundColor: '#eb5757',
             padding: theme.spacing(0.5, 2),
         },
+        loading: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            padding: theme.spacing(8, 0),
+        },
         markdown: {
             'text-overflow': 'ellipsis',
             display: '-webkit-box',
@@ -163,7 +170,6 @@ export function Collectible(props: CollectibleProps) {
     )
     //#endregion
 
-    if (asset.loading) return <PluginSkeleton />
     if (!asset.value)
         return (
             <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center">
@@ -189,6 +195,18 @@ export function Collectible(props: CollectibleProps) {
         <Tab className={classes.tab} key="history" label={t('plugin_collectible_history')} />,
     ]
 
+    const renderTab = (tabIndex: CollectibleTab) => {
+        const tabMap: Record<CollectibleTab, ReactElement> = {
+            [CollectibleTab.ARTICLE]: <ArticleTab />,
+            [CollectibleTab.TOKEN]: <TokenTab />,
+            [CollectibleTab.OFFER]: <OfferTab />,
+            [CollectibleTab.LISTING]: <ListingTab />,
+            [CollectibleTab.HISTORY]: <HistoryTab />,
+        }
+
+        return tabMap[tabIndex] || null
+    }
+
     const endDate = asset.value?.end_time
     return (
         <>
@@ -270,11 +288,11 @@ export function Collectible(props: CollectibleProps) {
                         {tabs}
                     </Tabs>
                     <Paper className={classes.body}>
-                        {tabIndex === CollectibleTab.ARTICLE ? <ArticleTab /> : null}
-                        {tabIndex === CollectibleTab.TOKEN ? <TokenTab /> : null}
-                        {tabIndex === CollectibleTab.OFFER ? <OfferTab /> : null}
-                        {tabIndex === CollectibleTab.LISTING ? <ListingTab /> : null}
-                        {tabIndex === CollectibleTab.HISTORY ? <HistoryTab /> : null}
+                        {(asset.loading && (
+                            <div className={classes.loading}>
+                                <LoadingAnimation />
+                            </div>
+                        )) || <>{renderTab(tabIndex)}</>}
                     </Paper>
                 </CardContent>
                 <CardActions className={classes.footer}>

packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx

@@ -7,7 +7,7 @@ import { CollectibleState } from '../../hooks/useCollectibleState'
 import { Row } from './Row'
 import { CollectibleProvider } from '../../types'
 import { TableListPagination } from '../Pagination'
-import { LoadingTable } from '../LoadingTable'
+import { LoadingAnimation } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -52,7 +52,12 @@ export function HistoryTab(props: HistoryTabProps) {
     }, [events.value, provider])
     //#endregion
 
-    if (events.loading) return <LoadingTable />
+    if (events.loading)
+        return (
+            <div className={classes.empty}>
+                <LoadingAnimation />
+            </div>
+        )
     if (!events.value || events.error || !events.value?.data.length)
         return (
             <Table size="small" stickyHeader>