diff --git a/components/Earn/EarnInvestSection.tsx b/components/Earn/EarnInvestSection.tsx index 61c52463..67fa71a0 100644 --- a/components/Earn/EarnInvestSection.tsx +++ b/components/Earn/EarnInvestSection.tsx @@ -153,36 +153,46 @@ export const EarnInvestSection = () => { collapse(); }; - // The whole section is for people who already hold something, so it is absent - // rather than empty for everyone else. Held back while the holdings read is in - // flight too: appearing and then vanishing reads worse than arriving late. - if (isHoldingsLoading || holdings.length === 0) return null; + // The positions panel is for people who already hold something, so it is absent + // rather than empty for everyone else, and held back while the holdings read is + // in flight: appearing and then vanishing reads worse than arriving a beat late. + // + // The catalog below is deliberately not gated on it. It is the only route from + // Earn into buying a first stock, so it has to render for holders and + // non-holders alike, and it must not wait on a chain read to do so. + const hasPositions = !isHoldingsLoading && holdings.length > 0; return ( Invest - Your positions - - {holdings.map(holding => { - const token = tokensBySymbol.get(holding.ticker); - const price = prices[holding.ticker]; + {hasPositions && ( + <> + Your positions - return ( - token && openStock(token, 'sell')} - /> - ); - })} - + + {holdings.map(holding => { + const token = tokensBySymbol.get(holding.ticker); + const price = prices[holding.ticker]; + + return ( + token && openStock(token, 'sell')} + /> + ); + })} + + + )} - + {/* Falls back to the section's subtitle slot when nothing sits above it. */} + Buy, sell and use as collateral