fix: improve uploading progress animation (#628)

Co-authored-by: nd0ut <[email protected]>
uploadcare · Mar 7, 2024 · a1db063 · a1db063
1 parent c50f13c
commit a1db063
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 51 deletions.
diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js
@@ -48,7 +48,6 @@ export class FileItem extends UploaderBlock {
       thumbUrl: '',
       progressValue: 0,
       progressVisible: false,
-      progressUnknown: false,
       badgeIcon: '',
       isFinished: false,
       isFailed: false,
@@ -276,15 +275,6 @@ export class FileItem extends UploaderBlock {
 
   /** @param {(typeof FileItemState)[keyof typeof FileItemState]} state */
   _handleState(state) {
-    this.set$({
-      isFailed: state === FileItemState.FAILED,
-      isUploading: state === FileItemState.UPLOADING,
-      isFinished: state === FileItemState.FINISHED,
-      progressVisible: state === FileItemState.UPLOADING,
-      isEditable: this.cfg.useCloudImageEditor && this._entry?.getValue('isImage') && this._entry?.getValue('cdnUrl'),
-      errorText: this._entry.getValue('errors')?.[0]?.message,
-    });
-
     if (state === FileItemState.FAILED) {
       this.$.badgeIcon = 'badge-error';
     } else if (state === FileItemState.FINISHED) {
@@ -296,6 +286,15 @@ export class FileItem extends UploaderBlock {
     } else {
       this.$.progressValue = 0;
     }
+
+    this.set$({
+      isFailed: state === FileItemState.FAILED,
+      isUploading: state === FileItemState.UPLOADING,
+      isFinished: state === FileItemState.FINISHED,
+      progressVisible: state === FileItemState.UPLOADING,
+      isEditable: this.cfg.useCloudImageEditor && this._entry?.getValue('isImage') && this._entry?.getValue('cdnUrl'),
+      errorText: this._entry.getValue('errors')?.[0]?.message,
+    });
   }
 
   destroyCallback() {
@@ -356,9 +355,6 @@ export class FileItem extends UploaderBlock {
     entry.setValue('isUploading', true);
     entry.setValue('errors', []);
 
-    if (!entry.getValue('file') && entry.getValue('externalUrl')) {
-      this.$.progressUnknown = true;
-    }
     try {
       let abortController = new AbortController();
       entry.setValue('abortController', abortController);
@@ -381,7 +377,6 @@ export class FileItem extends UploaderBlock {
               let percentage = progress.value * 100;
               entry.setValue('uploadProgress', percentage);
             }
-            this.$.progressUnknown = !progress.isComputable;
           },
           signal: abortController.signal,
           metadata: await this.getMetadataFor(entry.uid),
@@ -451,11 +446,7 @@ FileItem.template = /* HTML */ `
         <lr-icon name="upload"></lr-icon>
       </button>
     </div>
-    <lr-progress-bar
-      class="progress-bar"
-      set="value: progressValue; visible: progressVisible; unknown: progressUnknown"
-    >
-    </lr-progress-bar>
+    <lr-progress-bar class="progress-bar" set="value: progressValue; visible: progressVisible;"> </lr-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();
diff --git a/blocks/ProgressBar/ProgressBar.js b/blocks/ProgressBar/ProgressBar.js
@@ -3,8 +3,6 @@ import { Block } from '../../abstract/Block.js';
 export class ProgressBar extends Block {
   /** @type {Number} */
   _value = 0;
-  /** @type {Boolean} */
-  _unknownMode = false;
 
   init$ = {
     ...this.init$,
@@ -18,19 +16,22 @@ export class ProgressBar extends Block {
       if (value === undefined) {
         return;
       }
+      const prevValue = this._value;
       this._value = value;
 
-      if (!this._unknownMode) {
-        this.style.setProperty('--l-width', this._value.toString());
+      if (value === 0 && prevValue > 0) {
+        this.ref.line.addEventListener('transitionend', () => {
+          this.style.setProperty('--l-width', this._value.toString());
+        });
+        return;
       }
+
+      this.style.setProperty('--l-width', this._value.toString());
     });
+
     this.defineAccessor('visible', (visible) => {
       this.ref.line.classList.toggle('progress--hidden', !visible);
     });
-    this.defineAccessor('unknown', (unknown) => {
-      this._unknownMode = unknown;
-      this.ref.line.classList.toggle('progress--unknown', unknown);
-    });
   }
 }
 

diff --git a/blocks/ProgressBar/progress-bar.css b/blocks/ProgressBar/progress-bar.css
@@ -20,26 +20,6 @@ lr-progress-bar .progress {
     opacity 0.3s;
 }
 
-lr-progress-bar .progress--unknown {
-  width: 100%;
-  transform-origin: 0% 50%;
-  animation: lr-indeterminateAnimation 1s infinite linear;
-}
-
 lr-progress-bar .progress--hidden {
   opacity: 0;
 }
-
-@keyframes lr-indeterminateAnimation {
-  0% {
-    transform: translateX(0) scaleX(0);
-  }
-
-  40% {
-    transform: translateX(0) scaleX(0.4);
-  }
-
-  100% {
-    transform: translateX(100%) scaleX(0.5);
-  }
-}
diff --git a/blocks/ProgressBarCommon/ProgressBarCommon.js b/blocks/ProgressBarCommon/ProgressBarCommon.js
@@ -4,7 +4,6 @@ export class ProgressBarCommon extends UploaderBlock {
   init$ = {
     ...this.init$,
     visible: false,
-    unknown: false,
     value: 0,
 
     '*commonProgress': 0,
@@ -42,6 +41,4 @@ export class ProgressBarCommon extends UploaderBlock {
   }
 }
 
-ProgressBarCommon.template = /* HTML */ `
-  <lr-progress-bar set="visible: visible; unknown: unknown; value: value"></lr-progress-bar>
-`;
+ProgressBarCommon.template = /* HTML */ ` <lr-progress-bar set="visible: visible; value: value"></lr-progress-bar> `;