fix(external-sources): done button loading state behaviour (#770)

Co-authored-by: nd0ut <[email protected]>

Author: nd0ut

blocks/ExternalSource/ExternalSource.js

@@ -28,10 +28,12 @@ export class ExternalSource extends UploaderBlock {
       total: 0,
 
       isSelectionReady: false,
+      isDoneBtnEnabled: false,
       couldSelectAll: false,
       couldDeselectAll: false,
       showSelectionStatus: false,
       counterText: '',
+      doneBtnTextClass: 'uc-hidden',
 
       onDone: () => {
         for (const message of this.$.selectedList) {
@@ -150,7 +152,9 @@ export class ExternalSource extends UploaderBlock {
     );
 
     this.set$({
+      doneBtnTextClass: message.isReady ? '' : 'uc-hidden',
       isSelectionReady: message.isReady,
+      isDoneBtnEnabled: message.isReady && message.selectedFiles.length > 0,
       showSelectionStatus: message.isMultipleMode && message.total > 0,
       couldSelectAll: message.selectedCount < message.total,
       couldDeselectAll: message.selectedCount === message.total,
@@ -256,7 +260,7 @@ export class ExternalSource extends UploaderBlock {
     this.set$({
       selectedList: [],
       total: 0,
-      isSelectionReady: false,
+      isDoneBtnEnabled: false,
       couldSelectAll: false,
       couldDeselectAll: false,
       showSelectionStatus: false,
@@ -284,12 +288,10 @@ ExternalSource.template = /* HTML */ `
         <button type="button" set="onclick: onSelectAll; @hidden: !couldSelectAll" l10n="select-all"></button>
         <button type="button" set="onclick: onDeselectAll; @hidden: !couldDeselectAll" l10n="deselect-all"></button>
       </div>
-      <button
-        type="button"
-        class="uc-done-btn uc-primary-btn"
-        set="onclick: onDone; @disabled: !isSelectionReady"
-        l10n="done"
-      ></button>
+      <button type="button" class="uc-done-btn uc-primary-btn" set="onclick: onDone; @disabled: !isDoneBtnEnabled;">
+        <uc-spinner set="@hidden: isSelectionReady"></uc-spinner>
+        <span l10n="done" set="@class: doneBtnTextClass"></span>
+      </button>
     </div>
   </div>
 `;

blocks/ExternalSource/external-source.css

@@ -78,3 +78,17 @@ uc-external-source uc-activity-header {
 uc-external-source uc-activity-header .uc-close-btn {
   pointer-events: auto;
 }
+
+uc-external-source .uc-done-btn > span.uc-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+uc-external-source .uc-done-btn > uc-spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

blocks/Spinner/Spinner.js

@@ -0,0 +1,5 @@
+import { BaseComponent } from '@symbiotejs/symbiote';
+
+export class Spinner extends BaseComponent {}
+
+Spinner.template = /* HTML */ ` <div class="uc-spinner"></div> `;

blocks/Spinner/spinner.css

@@ -0,0 +1,18 @@
+@keyframes uc-spinner-keyframes {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.uc-spinner {
+  width: 1em;
+  height: 1em;
+  border: solid 2px transparent;
+  border-top-color: currentColor;
+  border-left-color: currentColor;
+  border-radius: 50%;
+  animation: uc-spinner-keyframes 400ms linear infinite;
+}

blocks/themes/uc-basic/index.css

@@ -30,6 +30,7 @@
 @import url('../../CloudImageEditor/index.css');
 @import url('../../CloudImageEditorActivity/index.css');
 @import url('../../Select/select.css');
+@import url('../../Spinner/spinner.css');
 
 /* POST RESET */
 @import url('post-reset.css');

index.js

@@ -32,6 +32,7 @@ export { FormInput } from './blocks/FormInput/FormInput.js';
 export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js';
 export { Select } from './blocks/Select/Select.js';
 export { Copyright } from './blocks/Copyright/Copyright.js';
+export { Spinner } from './blocks/Spinner/Spinner.js';
 
 // Solutions:
 export { FileUploaderRegular } from './solutions/file-uploader/regular/FileUploaderRegular.js';