From 5fe2df33a5e0757d66dba4dd3701c25f59d69639 Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Wed, 18 Dec 2024 12:03:15 -0400
Subject: [PATCH] feat: resolve initial layout race condition

---
 .../bridge/amount-and-review-screen.tsx       |  7 +++---
 .../web/components/bridge/amount-screen.tsx   | 23 +++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/bridge/amount-and-review-screen.tsx b/packages/web/components/bridge/amount-and-review-screen.tsx
index e9d4cbec86..c619858441 100644
--- a/packages/web/components/bridge/amount-and-review-screen.tsx
+++ b/packages/web/components/bridge/amount-and-review-screen.tsx
@@ -139,9 +139,8 @@ export const AmountAndReviewScreen = observer(
     const { supportedAssetsByChainId: counterpartySupportedAssetsByChainId } =
       supportedAssets;
 
-    const hasNoSupportedChains =
-      !supportedAssets.isLoading &&
-      supportedAssets.supportedChains.length === 0;
+    const hasSupportedChains =
+      !supportedAssets.isLoading && supportedAssets.supportedChains.length > 0;
 
     /** Filter for bridges for the current to/from chain/asset selection. */
     const supportedBridgeInfo = useMemo<SupportedBridgeInfo>(() => {
@@ -287,7 +286,7 @@ export const AmountAndReviewScreen = observer(
               isLoadingAssetsInOsmosis={isLoadingAssetsInOsmosis}
               bridgesSupportedAssets={supportedAssets}
               supportedBridgeInfo={supportedBridgeInfo}
-              hasNoSupportedChains={hasNoSupportedChains}
+              hasSupportedChains={hasSupportedChains}
               fromChain={fromChain}
               setFromChain={setFromChain}
               toChain={toChain}
diff --git a/packages/web/components/bridge/amount-screen.tsx b/packages/web/components/bridge/amount-screen.tsx
index 56ddcc51a0..a2215a3a88 100644
--- a/packages/web/components/bridge/amount-screen.tsx
+++ b/packages/web/components/bridge/amount-screen.tsx
@@ -84,7 +84,7 @@ interface AmountScreenProps {
 
   bridgesSupportedAssets: ReturnType<typeof useBridgesSupportedAssets>;
   supportedBridgeInfo: SupportedBridgeInfo;
-  hasNoSupportedChains: boolean;
+  hasSupportedChains: boolean;
 
   fromChain: BridgeChainWithDisplayInfo | undefined;
   setFromChain: (chain: BridgeChainWithDisplayInfo) => void;
@@ -126,7 +126,7 @@ export const AmountScreen = observer(
       isLoading: isLoadingSupportedAssets,
     },
     supportedBridgeInfo,
-    hasNoSupportedChains,
+    hasSupportedChains,
 
     fromChain,
     setFromChain,
@@ -666,9 +666,13 @@ export const AmountScreen = observer(
       isLoadingAssetsInOsmosis ||
       !canonicalAsset ||
       !canonicalAssetPrice ||
-      (direction === "withdraw"
-        ? !fromChain || !fromAsset
-        : !toChain || !toAsset);
+      // If we don't have supported chains, we won't have a fromAsset or toAsset
+      // so we can't consider the loading state.
+      // therefore we only consider the loading state if we have supported chains.
+      (hasSupportedChains &&
+        (direction === "withdraw"
+          ? !fromChain || !fromAsset
+          : !toChain || !toAsset));
 
     const shouldShowAssetDropdown = useMemo(() => {
       return direction === "deposit"
@@ -831,8 +835,9 @@ export const AmountScreen = observer(
      * - Quoting is disabled for the current selection, meaning providers can't provide quotes but they may provide external URLs
      */
     if (
-      (!isLoading || hasNoSupportedChains) &&
-      (areAssetTransfersDisabled ||
+      !isLoading &&
+      (!hasSupportedChains ||
+        areAssetTransfersDisabled ||
         !fromChain ||
         !fromAsset ||
         !toChain ||
@@ -842,14 +847,14 @@ export const AmountScreen = observer(
     ) {
       return (
         <>
-          {!hasNoSupportedChains && chainSelection}
+          {hasSupportedChains && chainSelection}
           <OnlyExternalBridgeSuggest
             direction={direction}
             toChain={toChain}
             toAsset={
               // If we haven't supported a chain, we can't suggest an asset
               // so we use the canonical asset as a fallback
-              canonicalAsset && !toAsset && hasNoSupportedChains
+              canonicalAsset && !toAsset && !hasSupportedChains
                 ? {
                     address: canonicalAsset?.coinMinimalDenom,
                     decimals: canonicalAsset?.coinDecimals,