Merge branch 'spacebean/dex-ui/design-fixes' into spacebean/dex-ui/yi…

…eld-and-housekeeping
BeanstalkFarms · Dec 13, 2023 · 8c3f424 · 8c3f424
2 parents 35d414f + a7cad1f
commit 8c3f424
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 43 deletions.
diff --git a/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx b/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx
@@ -417,25 +417,27 @@ const AddLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, han
   );
 };
 
+const AddLiquidityLoading = () => (
+  <div>
+    <LargeGapContainer>
+      <LoadingTemplate.Flex gap={12}>
+        <LoadingTemplate.Input />
+        <LoadingTemplate.Input />
+      </LoadingTemplate.Flex>
+      <LoadingTemplate.Flex gap={8}>
+        <LoadingTemplate.Item height={20} width={285} />
+        <LoadingTemplate.Item height={20} width={145} />
+      </LoadingTemplate.Flex>
+      <ButtonWrapper>
+        <LoadingTemplate.Button />
+      </ButtonWrapper>
+    </LargeGapContainer>
+  </div>
+);
+
 export const AddLiquidity: React.FC<BaseAddLiquidityProps & { well: Well | undefined; loading: boolean }> = (props) => {
   if (!props.well || props.loading) {
-    return (
-      <div>
-        <LargeGapContainer>
-          <LoadingTemplate.Flex gap={12}>
-            <LoadingTemplate.Input />
-            <LoadingTemplate.Input />
-          </LoadingTemplate.Flex>
-          <LoadingTemplate.Flex gap={8}>
-            <LoadingTemplate.Item height={20} width={285} />
-            <LoadingTemplate.Item height={20} width={145} />
-          </LoadingTemplate.Flex>
-          <ButtonWrapper>
-            <LoadingTemplate.Button />
-          </ButtonWrapper>
-        </LargeGapContainer>
-      </div>
-    );
+    return <AddLiquidityLoading />;
   }
 
   return <AddLiquidityContent {...props} well={props.well} />;

diff --git a/projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx b/projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx
@@ -431,34 +431,36 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
   );
 };
 
+const RemoveLiquidityLoading = () => (
+  <LargeGapContainer>
+    <TokenContainer>
+      <LoadingTemplate.Input />
+    </TokenContainer>
+    <MediumGapContainer>
+      <OutputModeSelectorContainer>
+        <LoadingTemplate.Item width={100} height={20} margin={{ bottom: 4 }} />
+        <LoadingTemplate.Flex row gap={8}>
+          <LoadingTemplate.Button />
+          <LoadingTemplate.Button />
+        </LoadingTemplate.Flex>
+      </OutputModeSelectorContainer>
+      <TokenContainer>
+        <LoadingTemplate.Input />
+      </TokenContainer>
+      <TokenContainer>
+        <LoadingTemplate.Input />
+      </TokenContainer>
+    </MediumGapContainer>
+    <LoadingTemplate.Item width={185} />
+    <ButtonWrapper>
+      <LoadingTemplate.Button />
+    </ButtonWrapper>
+  </LargeGapContainer>
+);
+
 export const RemoveLiquidity: React.FC<{ well: Well | undefined; loading: boolean } & BaseRemoveLiquidityProps> = (props) => {
   if (!props.well || props.loading) {
-    return (
-      <LargeGapContainer>
-        <TokenContainer>
-          <LoadingTemplate.Input />
-        </TokenContainer>
-        <MediumGapContainer>
-          <OutputModeSelectorContainer>
-            <LoadingTemplate.Item width={100} height={20} margin={{ bottom: 4 }} />
-            <LoadingTemplate.Flex row gap={8}>
-              <LoadingTemplate.Button />
-              <LoadingTemplate.Button />
-            </LoadingTemplate.Flex>
-          </OutputModeSelectorContainer>
-          <TokenContainer>
-            <LoadingTemplate.Input />
-          </TokenContainer>
-          <TokenContainer>
-            <LoadingTemplate.Input />
-          </TokenContainer>
-        </MediumGapContainer>
-        <LoadingTemplate.Item width={185} />
-        <ButtonWrapper>
-          <LoadingTemplate.Button />
-        </ButtonWrapper>
-      </LargeGapContainer>
-    );
+    return <RemoveLiquidityLoading />;
   }
 
   return <RemoveLiquidityContent {...props} well={props.well} />;