From 4084661b2c62068eef666324ec3a12cedadb2404 Mon Sep 17 00:00:00 2001
From: aramalipoor <aram.alipoor@gmail.com>
Date: Wed, 21 Dec 2022 13:51:53 +0100
Subject: [PATCH] fix: show loading mask if data not loaded yet

---
 packages/react/rollup.config.js               |  2 +-
 .../components/TieredSalesIfNotSoldOut.tsx    | 21 ++++++++++++++-----
 .../components/TieredSalesIfSoldOut.tsx       | 21 ++++++++++++++-----
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 02c6e47a..7bd0083e 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -47,7 +47,7 @@ export default [
       file: packageJson.module,
       format: 'esm',
       sourcemap: true,
-      inlineDynamicImports: true,
+      // inlineDynamicImports: true,
     },
     plugins: [
       peerDepsExternal(),
diff --git a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfNotSoldOut.tsx b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfNotSoldOut.tsx
index b47bdc88..6e7b1eee 100644
--- a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfNotSoldOut.tsx
+++ b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfNotSoldOut.tsx
@@ -9,12 +9,14 @@ import { useTieredSalesContext } from '../providers/TieredSalesProvider';
 type Props = PropsWithChildren<
   BareComponentProps & {
     tierId?: number;
+    loadingMask?: React.ReactNode;
   }
 >;
 
 export const TieredSalesIfNotSoldOut = ({
   as,
   tierId,
+  loadingMask = <>...</>,
   children,
   ...attributes
 }: Props) => {
@@ -35,10 +37,7 @@ export const TieredSalesIfNotSoldOut = ({
   });
 
   const isSoldOut =
-    totalMinted?.data &&
-    !totalMinted.isLoading &&
-    maxAllocation?.data &&
-    !maxAllocation.isLoading
+    maxAllocation?.data && totalMinted?.data
       ? BigNumber.from(totalMinted?.data).gte(
           BigNumber.from(maxAllocation?.data),
         )
@@ -47,5 +46,17 @@ export const TieredSalesIfNotSoldOut = ({
   const Component =
     as || (attributes.className || attributes.style ? 'span' : Fragment);
 
-  return <Component {...attributes}>{!isSoldOut ? children : null}</Component>;
+  const isLoading = totalMinted.isLoading || maxAllocation.isLoading;
+
+  return (
+    <Component {...attributes}>
+      {loadingMask &&
+      isLoading &&
+      (maxAllocation?.data === undefined || totalMinted?.data === undefined) ? (
+        <>{loadingMask}</>
+      ) : isSoldOut === false ? (
+        children
+      ) : null}
+    </Component>
+  );
 };
diff --git a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfSoldOut.tsx b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfSoldOut.tsx
index dddc24aa..4963a9c7 100644
--- a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfSoldOut.tsx
+++ b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfSoldOut.tsx
@@ -9,12 +9,14 @@ import { useTieredSalesContext } from '../providers/TieredSalesProvider';
 type Props = PropsWithChildren<
   BareComponentProps & {
     tierId?: number;
+    loadingMask?: React.ReactNode;
   }
 >;
 
 export const TieredSalesIfSoldOut = ({
   as,
   tierId,
+  loadingMask = <>...</>,
   children,
   ...attributes
 }: Props) => {
@@ -35,10 +37,7 @@ export const TieredSalesIfSoldOut = ({
   });
 
   const isSoldOut =
-    totalMinted?.data &&
-    !totalMinted.isLoading &&
-    maxAllocation?.data &&
-    !maxAllocation.isLoading
+    maxAllocation?.data && totalMinted?.data
       ? BigNumber.from(totalMinted?.data).gte(
           BigNumber.from(maxAllocation?.data),
         )
@@ -47,5 +46,17 @@ export const TieredSalesIfSoldOut = ({
   const Component =
     as || (attributes.className || attributes.style ? 'span' : Fragment);
 
-  return <Component {...attributes}>{isSoldOut ? children : null}</Component>;
+  const isLoading = totalMinted.isLoading || maxAllocation.isLoading;
+
+  return (
+    <Component {...attributes}>
+      {loadingMask &&
+      isLoading &&
+      (maxAllocation?.data === undefined || totalMinted?.data === undefined) ? (
+        <>{loadingMask}</>
+      ) : isSoldOut === true ? (
+        children
+      ) : null}
+    </Component>
+  );
 };