ZIP Imports: Updated import form to show loading indicator

And disable button after submit.
Added here because the import could take some time, so it's best to show
an indicator to the user to show that something is happening, and help
prevent duplicate submission or re-submit attempts.

Author: ssddanbrown

resources/js/components/index.js

@@ -30,6 +30,7 @@ export {HeaderMobileToggle} from './header-mobile-toggle';
 export {ImageManager} from './image-manager';
 export {ImagePicker} from './image-picker';
 export {ListSortControl} from './list-sort-control';
+export {LoadingButton} from './loading-button';
 export {MarkdownEditor} from './markdown-editor';
 export {NewUserPassword} from './new-user-password';
 export {Notification} from './notification';

resources/js/components/loading-button.ts

@@ -0,0 +1,38 @@
+import {Component} from "./component.js";
+import {showLoading} from "../services/dom";
+import {el} from "../wysiwyg/utils/dom";
+
+/**
+ * Loading button.
+ * Shows a loading indicator and disables the button when the button is clicked,
+ * or when the form attached to the button is submitted.
+ */
+export class LoadingButton extends Component {
+
+    protected button!: HTMLButtonElement;
+    protected loadingEl: HTMLDivElement|null = null;
+
+    setup() {
+        this.button = this.$el as HTMLButtonElement;
+        const form = this.button.form;
+
+        const action = () => {
+            setTimeout(() => this.showLoadingState(), 10)
+        };
+
+        this.button.addEventListener('click', action);
+        if (form) {
+            form.addEventListener('submit', action);
+        }
+    }
+
+    showLoadingState() {
+        this.button.disabled = true;
+
+        if (!this.loadingEl) {
+            this.loadingEl = el('div', {class: 'inline block'}) as HTMLDivElement;
+            showLoading(this.loadingEl);
+            this.button.after(this.loadingEl);
+        }
+    }
+}

resources/sass/styles.scss

@@ -106,6 +106,10 @@ $loadingSize: 10px;
   }
 }
 
+.inline.block .loading-container {
+  margin: $-xs $-s;
+}
+
 .skip-to-content-link {
   position: fixed;
   top: -52px;

resources/views/exports/import-show.blade.php

@@ -59,7 +59,7 @@
                     ])
                 @endif
 
-                <div class="text-right">
+                <div class="flex-container-row items-center justify-flex-end">
                     <a href="{{ url('/import') }}" class="button outline">{{ trans('common.cancel') }}</a>
                     <div component="dropdown" class="inline block mx-s">
                         <button refs="dropdown@toggle"
@@ -72,7 +72,7 @@ class="button outline">{{ trans('common.delete') }}</button>
                             <button type="submit" form="import-delete-form" class="text-link small text-item">{{ trans('common.confirm') }}</button>
                         </div>
                     </div>
-                    <button type="submit" class="button">{{ trans('entities.import_run') }}</button>
+                    <button component="loading-button" type="submit" class="button">{{ trans('entities.import_run') }}</button>
                 </div>
             </form>
         </main>