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:
2026-02-27 16:05:49 +07:00
parent 9e45c75d29
commit b9250dab2e
4 changed files with 26 additions and 14 deletions

View File

@@ -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 || "&nbsp;"}</div>`;
html += balanceLinesForAddress(
addr,
state.trackedTokens,