Both elements now have min-height and placeholder content so they reserve vertical space before API data arrives, preventing layout jumps when prices load. This follows the No Layout Shift policy in the README.
This commit is contained in:
+10
-3
@@ -177,7 +177,12 @@
|
|||||||
id="total-value"
|
id="total-value"
|
||||||
class="text-2xl font-bold min-h-[2rem]"
|
class="text-2xl font-bold min-h-[2rem]"
|
||||||
></div>
|
></div>
|
||||||
<div id="total-value-sub" class="text-xs text-muted mb-2"></div>
|
<div
|
||||||
|
id="total-value-sub"
|
||||||
|
class="text-xs text-muted mb-2 min-h-[1rem]"
|
||||||
|
>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- active address display -->
|
<!-- active address display -->
|
||||||
<div
|
<div
|
||||||
@@ -204,8 +209,10 @@
|
|||||||
<!-- ETH price -->
|
<!-- ETH price -->
|
||||||
<div
|
<div
|
||||||
id="eth-price-display"
|
id="eth-price-display"
|
||||||
class="bg-well text-center font-bold text-xs p-1 mx-1 mb-3"
|
class="bg-well text-center font-bold text-xs p-1 mx-1 mb-3 min-h-[1.5rem]"
|
||||||
></div>
|
>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- wallet list -->
|
<!-- wallet list -->
|
||||||
<div id="wallet-list"></div>
|
<div id="wallet-list"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user