fix: show loading mask if data not loaded yet

0xflair · Dec 21, 2022 · 4084661 · 4084661
1 parent 3a34b80
commit 4084661
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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>
+  );
 };