uploads: change loading indicator for upload widget.

Change the loading indicator from a progress bar to a spinner. Fixes
issue with the <progress> element having a different appearance on
different browsers.

app/javascript/src/javascripts/file_upload_component.js

@@ -92,11 +92,22 @@ export default class FileUploadComponent {
     this.pollStatus(upload);
   }
 
+  loadingStart() {
+    this.$component.find(".spinner-icon").removeClass("hidden");
+    this.$component.find("input").attr("disabled", "disabled");
+    this.$component.find("form").addClass("pointer-events-none cursor-wait opacity-50");
+  }
+
+  loadingStop() {
+    this.$component.find(".spinner-icon").addClass("hidden");
+    this.$component.find("input").removeAttr("disabled");
+    this.$component.find("form").removeClass("pointer-events-none cursor-wait opacity-50");
+  }
+
   // Called after the upload is submitted via AJAX. Polls the upload until it
   // is complete, then redirects to the upload page.
   async pollStatus(upload) {
-    this.$component.find("progress").removeClass("hidden");
-    this.$component.find("input").attr("disabled", "disabled");
+    this.loadingStart();
 
     while (upload.media_asset_count <= 1 && upload.status !== "completed" && upload.status !== "error") {
       await Utility.delay(FileUploadComponent.POLL_DELAY);
@@ -105,8 +116,7 @@ export default class FileUploadComponent {
 
     if (upload.status === "error") {
       this.$dropzone.removeClass("success");
-      this.$component.find("progress").addClass("hidden");
-      this.$component.find("input").removeAttr("disabled");
+      this.loadingStop();
 
       Utility.error(`Upload failed: ${upload.error}.`);
     } else {

app/javascript/src/styles/common/utilities.scss

@@ -16,6 +16,7 @@ $spacer: 0.25rem; /* 4px */
 .cursor-pointer { cursor: pointer; }
 .cursor-zoom-in { cursor: zoom-in; }
 .cursor-zoom-out { cursor: zoom-out; }
+.cursor-wait { cursor: wait; }
 
 .hidden { display: none !important; }
 .inline-block { display: inline-block; }
@@ -48,6 +49,8 @@ $spacer: 0.25rem; /* 4px */
 .pointer-events-none { pointer-events: none; }
 .select-none { user-select: none; }
 
+.opacity-50 { opacity: 0.5; }
+
 .leading-none   { line-height: 1; }
 .leading-normal { line-height: 1.5; }
 
@@ -59,6 +62,8 @@ $spacer: 0.25rem; /* 4px */
 .left-0\.5   { left: 0.5 * $spacer; }
 .right-0\.5  { right: 0.5 * $spacer; }
 
+.inset-0 { top: 0; right: 0; bottom: 0; left: 0 }
+
 .border, %border { border-width: 1px; }
 
 .border-b   { border-bottom-width: 1px; }
@@ -79,6 +84,7 @@ $spacer: 0.25rem; /* 4px */
 
 .object-contain { object-fit: contain; }
 
+.m-auto { margin: auto; }
 .m-0    { margin: 0; }
 .m-px   { margin: 1px; }
 .m-0\.5 { margin: 0.5 * $spacer; }
@@ -199,6 +205,8 @@ $spacer: 0.25rem; /* 4px */
 .grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
 .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 
+.link-color { color: var(--link-color); }
+
 .card {
   @extend %border;
   @extend %rounded-lg;
@@ -259,6 +267,20 @@ $spacer: 0.25rem; /* 4px */
   }
 }
 
+.animate-spin {
+  animation: animate-spin 1s linear infinite;
+}
+
+@keyframes animate-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (min-width: 660px) {
   .md\:inline-block { display: inline-block; }
   .md\:block { display: block; }