sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix layout shift from async USD prices and token balances

Browse Source 
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:
Jeffrey Paul
2026-02-27 16:05:49 +07:00
parent 9e45c75d29
commit b9250dab2e
4 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/popup/index.html
View File

@@ -274,11 +274,15 @@
</div>
<div
id="address-usd-total"
class="text-xs text-muted mb-3 text-right"
></div>
class="text-xs text-muted mb-3 text-right min-h-[1rem]"
>
&nbsp;
</div>
<!-- balances -->
<div class="border-b border-border-light pb-2 mb-2">
<div id="address-balances"></div>
<div id="address-balances" class="min-h-[1.25rem]">
&nbsp;
</div>
</div>
<!-- actions -->
@@ -343,11 +347,15 @@
</div>
<div
id="address-token-usd-total"
class="text-xs text-muted mb-3 text-right"
></div>
class="text-xs text-muted mb-3 text-right min-h-[1rem]"
>
&nbsp;
</div>
<!-- single token balance -->
<div class="border-b border-border-light pb-2 mb-2">
<div id="address-token-balance"></div>
<div id="address-token-balance" class="min-h-[1.25rem]">
&nbsp;
</div>
</div>
<!-- actions -->

3
src/popup/views/addressDetail.js
View File

@@ -54,7 +54,8 @@ function show() {
const addrLink = etherscanAddressLink(addr.address);
$("address-etherscan-link").innerHTML =
`<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
$("address-usd-total").textContent = formatUsd(getAddressValueUsd(addr));
const usdTotal = formatUsd(getAddressValueUsd(addr));
$("address-usd-total").innerHTML = usdTotal || "&nbsp;";
const ensEl = $("address-ens");
if (addr.ensName) {
ensEl.innerHTML =

3
src/popup/views/addressToken.js
View File

@@ -124,7 +124,8 @@ function show() {
// USD total for this token only
const usdVal = price ? amount * price : 0;
$("address-token-usd-total").textContent = formatUsd(usdVal);
const usdStr = formatUsd(usdVal);
$("address-token-usd-total").innerHTML = usdStr || "&nbsp;";
// Single token balance line (no tokenId — not clickable here)
$("address-token-balance").innerHTML = balanceLine(symbol, amount, price);

14
src/popup/views/home.js
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"
: "&nbsp;";
}
const addr = findActiveAddr();
if (!addr) {
el.textContent = "";
if (subEl) subEl.textContent = "";
el.innerHTML = "&nbsp;";
if (subEl) subEl.innerHTML = "&nbsp;";
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) : "&nbsp;";
}
}
@@ -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,