From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 5 May 2024 06:44:47 +0000 (-0700)
Subject: Add basic loading/complete indicators
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=add1e3c99791f04873133ef246fd90b2442af86e;p=targz

Add basic loading/complete indicators
---

diff --git a/index.html b/index.html
index 640e044..4544619 100644
--- a/index.html
+++ b/index.html
@@ -47,12 +47,34 @@
       border: 1px solid hsl(216deg 75% 75%);
       cursor: pointer;
       transition: background-color 400ms;
+      position: relative;
 
       &:hover,
       &:focus {
         transition: background-color 200ms;
         background-color: hsl(216deg 70% 85%);
       }
+
+      &::after {
+        position: absolute;
+        line-height: 0;
+        inset-inline-start: calc(100% + 8px);
+        inset-block-start: 50%;
+      }
+
+      &[data-loading] {
+        &::after {
+          content: '⏳';
+          content: '⏳' / 'Loading';
+        }
+      }
+
+      &[data-complete] {
+        &::after {
+          content: '✅';
+          content: '✅' / 'Complete';
+        }
+      }
     }
   </style>
 </head>
@@ -134,10 +156,14 @@
       }).then(h => h.createWritable());
 
       // Stream to destination file
+      e.submitter.removeAttribute('data-complete');
+      e.submitter.setAttribute('data-loading', '');
       const files = e.target.elements['contents'].files;
-      tar(files)
+      await tar(files)
         .pipeThrough(new CompressionStream('gzip'))
         .pipeTo(destination);
+      e.submitter.removeAttribute('data-loading');
+      e.submitter.setAttribute('data-complete', '');
     });
   </script>
 </body>