fix: move loading elements to sdk

0xflair · Dec 15, 2022 · b8b9a60 · b8b9a60
1 parent b47f438
commit b8b9a60
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesSelector.tsx b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesSelector.tsx
@@ -66,7 +66,13 @@ export const TieredSalesSelector = ({
       'relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none',
     ),
   labelElement,
-  loadingElement,
+  loadingElement = (
+    <div className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
+      <div className="bg-gray-200 duration-300 animate-pulse h-48 rounded-lg"></div>
+      <div className="bg-gray-200 duration-300 animate-pulse h-48 rounded-lg"></div>
+      <div className="bg-gray-200 duration-300 animate-pulse h-48 rounded-lg"></div>
+    </div>
+  ),
   alwaysShowTierSelector = false,
   hideNotEligibleTiers = false,
   hideNotActiveTiers = false,

diff --git a/packages/react/src/modules/token/erc721/supply/components/ERC721MaxSupply.tsx b/packages/react/src/modules/token/erc721/supply/components/ERC721MaxSupply.tsx
@@ -13,7 +13,9 @@ export const ERC721MaxSupply = ({
   chainId,
   contractAddress,
   as,
-  loadingMask = '...',
+  loadingMask = (
+    <span className="bg-gray-200 duration-300 animate-pulse h-3 w-8 rounded-lg"></span>
+  ),
   ...attributes
 }: Props) => {
   const { data: maxSupply, isLoading: maxSupplyLoading } = useERC721MaxSupply({

diff --git a/packages/react/src/modules/token/erc721/supply/components/ERC721SupplyCounter.tsx b/packages/react/src/modules/token/erc721/supply/components/ERC721SupplyCounter.tsx
@@ -15,7 +15,13 @@ export const ERC721SupplyCounter = ({
   contractAddress,
   as,
   loadingMask,
-  separator = <>&nbsp;/&nbsp;</>,
+  separator = (
+    <div className="flex gap-1 items-center">
+      <span className="bg-gray-200 duration-300 animate-pulse h-3 w-8 rounded-lg"></span>
+      <span>/</span>
+      <span className="bg-gray-200 duration-300 animate-pulse h-3 w-8 rounded-lg"></span>
+    </div>
+  ),
   ...attributes
 }: Props) => {
   const { data: totalSupply, isLoading: totalSupplyLoading } =

diff --git a/packages/react/src/modules/token/erc721/supply/components/ERC721TotalSupply.tsx b/packages/react/src/modules/token/erc721/supply/components/ERC721TotalSupply.tsx
@@ -13,7 +13,9 @@ export const ERC721TotalSupply = ({
   chainId,
   contractAddress,
   as,
-  loadingMask = '...',
+  loadingMask = (
+    <span className="bg-gray-200 duration-300 animate-pulse h-3 w-8 rounded-lg"></span>
+  ),
   ...attributes
 }: Props) => {
   const { data: totalSupply, isLoading: totalSupplyLoading } =