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>