diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
index bee179dd33d4..15366d7dff68 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
@@ -7,9 +7,9 @@ import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleTab } from './CollectibleTab'
 import { OrderRow } from './OrderRow'
 import { TableListPagination } from './Pagination'
-import { LoadingTable } from './LoadingTable'
 import { NonFungibleAssetProvider, useAccount } from '@masknet/web3-shared-evm'
 import { isOne, isZero } from '@masknet/web3-shared-base'
+import { LoadingAnimation } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -69,7 +69,12 @@ export function ListingTab() {
         })
     }, [orders, asset.value])
 
-    if (asset.loading) return <LoadingTable />
+    if (asset.loading || orders.loading)
+        return (
+            <div className={classes.empty}>
+                <LoadingAnimation />
+            </div>
+        )
     if (!asset.value || asset.error || !dataSource.length)
         return (
             <>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
index 2d2453ffae63..6e1bba72f0c9 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
@@ -6,9 +6,9 @@ import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleTab } from './CollectibleTab'
 import { OrderRow } from './OrderRow'
 import { TableListPagination } from './Pagination'
-import { LoadingTable } from './LoadingTable'
 import { isOne, isZero } from '@masknet/web3-shared-base'
 import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { LoadingAnimation } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -61,7 +61,12 @@ export function OfferTab() {
         return offers.value.data
     }, [offers])
 
-    if (asset.loading) return <LoadingTable />
+    if (asset.loading || offers.loading)
+        return (
+            <div className={classes.empty}>
+                <LoadingAnimation />
+            </div>
+        )
     if (!offers.value?.data.length || asset.error || !dataSource.length)
         return (
             <Table size="small" stickyHeader>