From 0e0fb8dbdae8109bcdc93fdff07c6e27c99b1d6d Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 12 Dec 2024 23:40:48 -0800
Subject: [PATCH] Move loading icon inline with button instead of after block

Prevents output layout shift after loading is complete, unfortunately an additional <div> is required.
---
 index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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>
-- 
2.47.3