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.

diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 8ad5e14cb2e41b6c89570c6b11714a819589f181..12c991a51d89b17c8397253ac2221bdd3cfc5328 100644 (file)
--- a/resources/js/components/index.js
+++ b/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';

diff --git a/resources/js/components/loading-button.ts b/resources/js/components/loading-button.ts
new file mode 100644 (file)
index 0000000..a793d30
--- /dev/null
+++ b/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);
+        }
+    }
+}
\ No newline at end of file

diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index 2cf3cbf822192173d2fc2884b463ee27fc35aa50..2106f86e62509a7e0cc82e2910130ab805227517 100644 (file)
--- a/resources/sass/styles.scss
+++ b/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;

diff --git a/resources/views/exports/import-show.blade.php b/resources/views/exports/import-show.blade.php
index e4f199aa20c3193a34a1d5e5085b9b03f52d0948..a28b79bb35c3fe0535d8d1635ad402729dc287bd 100644 (file)
--- a/resources/views/exports/import-show.blade.php
+++ b/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 @@
                             <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>