From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 13 Dec 2024 07:40:48 +0000 (-0800)
Subject: Move loading icon inline with button instead of after block
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=0e0fb8dbdae8109bcdc93fdff07c6e27c99b1d6d;p=safe-owners

Move loading icon inline with button instead of after block

Prevents output layout shift after loading is complete, unfortunately an additional <div> is required.
---

diff --git a/index.html b/index.html
index 24a2ad1..1c63c5b 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
         background-color: hsl(216deg 15% 80%);
       }
 
-      &[data-loading] output::before {
+      &[data-loading] div:has(button)::after {
         content: 'Loading...';
         content: '⏳' / 'Loading...';
       }
@@ -168,7 +168,9 @@
     <label for="block">Block number (empty value will default to "latest")</label>
     <input id="block" name="block" type="number" placeholder="21392053">
 
-    <button>Lookup owners</button>
+    <div>
+      <button>Lookup owners</button>
+    </div>
 
     <output>
       <ul></ul>