diff --git a/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx b/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx index f0e40d719b2..9728855a51e 100644 --- a/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx +++ b/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx @@ -32,7 +32,7 @@ export function PriceImpactIndicator({ priceImpactParams, isBridging = false }: return ( - {priceImpact ? ( + {priceImpact && !priceImpactLoading ? ( {' '} { @@ -51,12 +57,20 @@ export function useFiatValuePriceImpact(): { priceImpact: Percent | undefined; i // Don't calculate price impact if trade is not set up (both trade assets are not set) if (!isTradeSetUp) return null + const stillLoading = isLoading && !hasLoadingTimedOut + + // While a fresh quote is loading, don't expose the stale value at all — consumers + // hide the percentage when `priceImpact` is undefined, leaving just the spinner. + if (stillLoading) { + return { priceImpact: undefined, isLoading: true } + } + const priceImpact = computeFiatValuePriceImpact( fiatValueInput ? FractionUtils.fractionLikeToFraction(fiatValueInput) : null, fiatValueOutput ? FractionUtils.fractionLikeToFraction(fiatValueOutput) : null, ) - return { priceImpact, isLoading: isLoading && !hasLoadingTimedOut } + return { priceImpact, isLoading: false } }, [isTradeSetUp, fiatValueInput, fiatValueOutput, isLoading, hasLoadingTimedOut]) }