web/satellite: add indeterminate progress bar

Display indeterminate progress bars in upload modal if progress is less
than 1.

Change-Id: Icdad8e59914985f3ed8fd25dd01dba7e9ff88cf0

web/satellite/package.json

@@ -73,4 +73,4 @@
   "browserslist": [
     "defaults"
   ]
-}
+}

web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue

@@ -16,7 +16,8 @@
                     </div>
                 </div>
                 <div v-if="!isClosable" class="modal__header__left__track">
-                    <div class="modal__header__left__track__fill" :style="progressStyle" />
+                    <div v-if="progress" class="modal__header__left__track__fill" :style="progressStyle" />
+                    <div v-else class="modal__header__left__track__indeterminate" />
                 </div>
             </div>
             <div class="modal__header__right">
@@ -129,16 +130,21 @@ const statusLabel = computed((): string => {
 });
 
 /**
- * Returns progress bar style.
+ * Returns upload progress.
  */
-const progressStyle = computed((): Record<string, string> => {
+const progress = computed((): number => {
-    const progress = uploading.value.reduce((total: number, item: UploadingBrowserObject) => {
+    return uploading.value.reduce((total: number, item: UploadingBrowserObject) => {
         total += item.progress || 0;
         return total;
     }, 0) / uploading.value.length;
+});
 
+/**
+ * Returns progress bar style.
+ */
+const progressStyle = computed((): Record<string, string> => {
     return {
-        width: `${progress}%`,
+        width: `${progress.value}%`,
     };
 });
 
@@ -323,6 +329,7 @@ onMounted(() => {
                 border-radius: 4px;
                 position: relative;
                 background-color: var(--c-grey-11);
+                overflow: hidden;
 
                 &__fill {
                     position: absolute;
@@ -333,6 +340,31 @@ onMounted(() => {
                     border-radius: 4px;
                     max-width: 100%;
                 }
+
+                &__indeterminate {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    bottom: 0;
+                    background-color: var(--c-blue-1);
+                    border-radius: 4px;
+                    max-width: 100%;
+                    width: 50%;
+                    animation: indeterminate-progress-bar;
+                    animation-duration: 2s;
+                    animation-iteration-count: infinite;
+                }
+
+                @keyframes indeterminate-progress-bar {
+
+                    from {
+                        left: -50%;
+                    }
+
+                    to {
+                        left: 100%;
+                    }
+                }
             }
         }
 

web/satellite/src/components/modals/objectUpload/UploadItem.vue

@@ -12,7 +12,8 @@
         <div class="item__right">
             <template v-if="item.status === UploadingStatus.InProgress">
                 <div class="item__right__track">
-                    <div class="item__right__track__fill" :style="progressStyle" />
+                    <div v-if="item.progress" class="item__right__track__fill" :style="progressStyle" />
+                    <div v-else class="item__right__track__indeterminate" />
                 </div>
                 <CloseIcon class="item__right__cancel" @click="cancelUpload" />
             </template>
@@ -183,6 +184,7 @@ function cancelUpload(): void {
             position: relative;
             margin-right: 34px;
             background-color: var(--c-blue-1);
+            overflow: hidden;
 
             &__fill {
                 position: absolute;
@@ -193,6 +195,31 @@ function cancelUpload(): void {
                 border-radius: 3px;
                 max-width: 100%;
             }
+
+            &__indeterminate {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                background-color: var(--c-blue-3);
+                border-radius: 3px;
+                max-width: 100%;
+                width: 50%;
+                animation: indeterminate-progress-bar;
+                animation-duration: 2s;
+                animation-iteration-count: infinite;
+            }
+
+            @keyframes indeterminate-progress-bar {
+
+                from {
+                    left: -50%;
+                }
+
+                to {
+                    left: 100%;
+                }
+            }
         }
 
         &__cancel {