From 2894d909b60037945d834c8e84a45b505d7ac3b7 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Tue, 29 Mar 2022 17:32:02 +0800
Subject: [PATCH 1/2] fix: improve loading in collectible offers and order
 table

---
 packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx | 2 +-
 packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
index bee179dd33d4..bc7281c0becb 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
@@ -69,7 +69,7 @@ export function ListingTab() {
         })
     }, [orders, asset.value])
 
-    if (asset.loading) return <LoadingTable />
+    if (asset.loading || orders.loading) return <LoadingTable />
     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..e6a92aeeee9a 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
@@ -61,7 +61,7 @@ export function OfferTab() {
         return offers.value.data
     }, [offers])
 
-    if (asset.loading) return <LoadingTable />
+    if (asset.loading || offers.loading) return <LoadingTable />
     if (!offers.value?.data.length || asset.error || !dataSource.length)
         return (
             <Table size="small" stickyHeader>

From ce6a15cedb6ccf70689645af5418f0a132c086bb Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Sat, 2 Apr 2022 15:07:05 +0800
Subject: [PATCH 2/2] fix: place listing and offer table loading

---
 .../src/plugins/Collectible/SNSAdaptor/ListingTab.tsx    | 9 +++++++--
 .../mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
index bc7281c0becb..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 || orders.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 e6a92aeeee9a..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 || offers.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>