Fix layout shift from async USD prices and token balances
Reserve vertical space with min-height and placeholders for all elements populated by async data: per-address USD totals, ETH price display, token balance containers, and total value sub-line. Prevents buttons and click targets from moving when price API responds.
This commit is contained in:
@@ -38,13 +38,15 @@ function renderTotalValue() {
|
||||
|
||||
const ethPrice = getPrice("ETH");
|
||||
if (priceEl) {
|
||||
priceEl.textContent = ethPrice ? formatUsd(ethPrice) + " USD/ETH" : "";
|
||||
priceEl.innerHTML = ethPrice
|
||||
? formatUsd(ethPrice) + " USD/ETH"
|
||||
: " ";
|
||||
}
|
||||
|
||||
const addr = findActiveAddr();
|
||||
if (!addr) {
|
||||
el.textContent = "";
|
||||
if (subEl) subEl.textContent = "";
|
||||
el.innerHTML = " ";
|
||||
if (subEl) subEl.innerHTML = " ";
|
||||
return;
|
||||
}
|
||||
const ethBal = parseFloat(addr.balance || "0");
|
||||
@@ -54,8 +56,8 @@ function renderTotalValue() {
|
||||
|
||||
if (subEl) {
|
||||
const totalUsd = getAddressValueUsd(addr);
|
||||
subEl.textContent =
|
||||
totalUsd !== null ? "Total: " + formatUsd(totalUsd) : "";
|
||||
subEl.innerHTML =
|
||||
totalUsd !== null ? "Total: " + formatUsd(totalUsd) : " ";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,7 +278,7 @@ function render(ctx) {
|
||||
html += `<span class="flex-shrink-0 ml-1">${infoBtn}</span>`;
|
||||
html += `</div>`;
|
||||
const addrUsd = formatUsd(getAddressValueUsd(addr));
|
||||
html += `<div class="text-xs text-muted text-right">${addrUsd}</div>`;
|
||||
html += `<div class="text-xs text-muted text-right min-h-[1rem]">${addrUsd || " "}</div>`;
|
||||
html += balanceLinesForAddress(
|
||||
addr,
|
||||
state.trackedTokens,
|
||||
|
||||
Reference in New Issue
Block a user