Add basic loading/complete indicators

diff --git a/index.html b/index.html
index 640e044169a77744cd8e49d70e6c36285068bcec..45446199cc996fc5907969a31faeaecd22b3a827 100644 (file)
--- 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>