fix(connect-modal): prevent img layout thrashing

hyperweb-io · Nov 24, 2023 · 12492a4 · 12492a4
1 parent 172cd2b
commit 12492a4
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 49 deletions.
diff --git a/src/ui/animate-layout/animate-layout.lite.tsx b/src/ui/animate-layout/animate-layout.lite.tsx
@@ -30,6 +30,7 @@ export default function AnimateLayout(props: AnimateLayoutProps) {
       style={{
         backfaceVisibility: "hidden",
       }}
+      data-part-id="animate-layout"
     >
       {props.children}
     </div>

diff --git a/src/ui/connect-modal-wallet-button/connect-modal-wallet-button.lite.tsx b/src/ui/connect-modal-wallet-button/connect-modal-wallet-button.lite.tsx
@@ -93,10 +93,14 @@ export default function ConnectModalWalletButton(
           <Box position="relative">
             {/* When there is only logo, use normal image */}
             <Show when={props.logo && !props.btmLogo}>
-              <img
-                alt={props.name}
-                src={props.logo}
-                className={fullWidthHeight}
+              <Box
+                as="img"
+                attributes={{
+                  alt: props.name,
+                  src: props.logo,
+                }}
+                width={props.variant === "square" ? "$16" : "$12"}
+                height={props.variant === "square" ? "$16" : "$12"}
               />
             </Show>
 

diff --git a/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts b/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts
@@ -18,12 +18,11 @@ export const walletList = style({
     },
     "&[data-has-list-wallets='true']": {
       paddingBottom: themeVars.space[8],
-    }
+    },
   },
 });
 
 export const squareWallets = style({
-  display: "grid",
   columnGap: themeVars.space[5],
   gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
   marginBottom: themeVars.space[5],

diff --git a/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx b/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx
@@ -12,6 +12,7 @@ import anime from "animejs";
 import type { AnimeInstance } from "animejs";
 import clx from "clsx";
 import Box from "../box";
+import FadeIn from "../fade-in";
 import WalletButton from "../connect-modal-wallet-button";
 import {
   walletList,
@@ -48,6 +49,11 @@ export default function ConnectModalWalletList(
     getListShapeWallets() {
       return props.wallets.filter((w) => w.shape === "list");
     },
+    showSquareShapeWallets() {
+      return props.wallets
+        .slice(0, 2)
+        .every((wallet) => wallet.shape === "square");
+    },
   });
 
   onMount(() => {
@@ -124,52 +130,51 @@ export default function ConnectModalWalletList(
         className={walletList}
         data-has-list-wallets={state.getListShapeWallets().length > 0}
       >
-        <Show
-          when={props.wallets
-            .slice(0, 2)
-            .every((wallet) => wallet.shape === "square")}
-        >
-          <div className={squareWallets}>
-            {/* First 2 wallets are square */}
-            <For each={props.wallets.slice(0, 2)}>
-              {(wallet, index) => (
-                <WalletButton
-                  key={`${wallet.name}-${index}`}
-                  variant="square"
-                  name={wallet.prettyName ?? wallet.name}
-                  logo={wallet.logo}
-                  subLogo={wallet.subLogo}
-                  btmLogo={wallet.btmLogo}
-                  onClick={state.onWalletItemClickAsync(async () =>
-                    props.onWalletItemClick?.(wallet.originalWallet)
-                  )}
-                />
-              )}
-            </For>
-          </div>
+        <Show when={state.showSquareShapeWallets()}>
+          <FadeIn isVisible={state.showSquareShapeWallets()}>
+            <Box display={"grid"} className={squareWallets}>
+              {/* First 2 wallets are square */}
+              <For each={props.wallets.slice(0, 2)}>
+                {(wallet, index) => (
+                  <WalletButton
+                    key={`${wallet.name}-${index}`}
+                    variant="square"
+                    name={wallet.prettyName ?? wallet.name}
+                    logo={wallet.logo}
+                    subLogo={wallet.subLogo}
+                    btmLogo={wallet.btmLogo}
+                    onClick={state.onWalletItemClickAsync(async () =>
+                      props.onWalletItemClick?.(wallet.originalWallet)
+                    )}
+                  />
+                )}
+              </For>
+            </Box>
+          </FadeIn>
         </Show>
 
-        <Box
-          display={state.getListShapeWallets().length === 0 ? "none" : "grid"}
-          className={listWallets}
-        >
-          <For each={state.getListShapeWallets()}>
-            {(wallet, index) => (
-              <WalletButton
-                key={`${wallet.name}-${index}`}
-                variant="list"
-                name={wallet.prettyName ?? wallet.name}
-                logo={wallet.logo}
-                badge={wallet.badge}
-                subLogo={wallet.subLogo}
-                btmLogo={wallet.btmLogo}
-                onClick={state.onWalletItemClickAsync(async () =>
-                  props.onWalletItemClick?.(wallet.originalWallet)
+        <Show when={state.getListShapeWallets().length > 0}>
+          <FadeIn isVisible={state.getListShapeWallets().length > 0}>
+            <Box display={"grid"} className={listWallets}>
+              <For each={state.getListShapeWallets()}>
+                {(wallet, index) => (
+                  <WalletButton
+                    key={`${wallet.name}-${index}`}
+                    variant="list"
+                    name={wallet.prettyName ?? wallet.name}
+                    logo={wallet.logo}
+                    badge={wallet.badge}
+                    subLogo={wallet.subLogo}
+                    btmLogo={wallet.btmLogo}
+                    onClick={state.onWalletItemClickAsync(async () =>
+                      props.onWalletItemClick?.(wallet.originalWallet)
+                    )}
+                  />
                 )}
-              />
-            )}
-          </For>
-        </Box>
+              </For>
+            </Box>
+          </FadeIn>
+        </Show>
       </div>
 
       <div ref={shadowRef} className={bottomShadow[state.theme]} />