fix(upload): show loading spinner on drag & drop upload

projectcaluma · Nov 21, 2023 · 7b76628 · 7b76628
1 parent 32d2009
commit 7b76628
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/addon/components/document-view.hbs b/addon/components/document-view.hbs
@@ -36,7 +36,7 @@
       {{on "dragenter" this.onDragEnter}}
       {{on "dragleave" this.onDragLeave}}
       {{on "dragover" this.onDragOver}}
-      {{on "drop" this.onDrop}}
+      {{on "drop" (perform this.onDrop)}}
     >
       <div
         class="uk-position-cover uk-padding-small uk-height-1-1 uk-overflow-auto"
@@ -74,11 +74,13 @@
           class="uk-width-1 uk-padding-remove uk-position-bottom uk-button uk-button-primary"
           type="button"
         >
-          {{if
-            this.canDrop
-            (t "alexandria.document-grid.drop-to-upload")
-            (t "alexandria.document-grid.drop-not-allowed")
-          }}
+          {{#if this.onDrop.isRunning}}
+            <UkSpinner />
+          {{else if this.canDrop}}
+            {{t "alexandria.document-grid.drop-to-upload"}}
+          {{else}}
+            {{t "alexandria.document-grid.drop-not-allowed"}}
+          {{/if}}
         </button>
       {{/if}}
     </div>

diff --git a/addon/components/document-view.js b/addon/components/document-view.js
@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { lastValue, task } from "ember-concurrency";
+import { dropTask, lastValue, task } from "ember-concurrency";
 
 import { ErrorHandler } from "ember-alexandria/helpers/error-handler";
 
@@ -96,7 +96,7 @@ export default class DocumentViewComponent extends Component {
     event.stopPropagation();
   }
 
-  @action async onDrop(event) {
+  onDrop = dropTask(async (event) => {
     if (!this.args.filters.category) {
       return;
     }
@@ -126,7 +126,7 @@ export default class DocumentViewComponent extends Component {
     }
 
     this.isDragOver = false;
-  }
+  });
 
   // * DOCUMENT SELECTION
   handleKeyDown(event) {