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 24a2ad15d5b2cbb92f3e7591cea6e756a2894965..1c63c5bbcefc0fc647761bf1e21d58501df666be 100644 (file)
--- 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>