From f79c6aef8d1c9aa83e9ce89ec1e5ac9d9e1eb570 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Fri, 22 Nov 2024 21:36:42 +0000
Subject: [PATCH] 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.
---
 resources/js/components/index.js              |  1 +
 resources/js/components/loading-button.ts     | 38 +++++++++++++++++++
 resources/sass/styles.scss                    |  4 ++
 resources/views/exports/import-show.blade.php |  4 +-
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/components/loading-button.ts

diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 8ad5e14cb..12c991a51 100644
--- 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
index 000000000..a793d30a2
--- /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 2cf3cbf82..2106f86e6 100644
--- 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 e4f199aa2..a28b79bb3 100644
--- 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>