From 7f499e44a6bd4bddd2dec0b8d34b963c172a2416 Mon Sep 17 00:00:00 2001
From: Cameron <cameron@storj.io>
Date: Fri, 21 Jul 2023 15:42:07 -0400
Subject: [PATCH] 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                    |  2 +-
 .../objectUpload/ObjectsUploadingModal.vue    | 42 ++++++++++++++++---
 .../modals/objectUpload/UploadItem.vue        | 29 ++++++++++++-
 3 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/web/satellite/package.json b/web/satellite/package.json
index eb2cb818d..b08150085 100644
--- a/web/satellite/package.json
+++ b/web/satellite/package.json
@@ -73,4 +73,4 @@
   "browserslist": [
     "defaults"
   ]
-}
+}
\ No newline at end of file
diff --git a/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue b/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue
index 592c3fe63..54a9972bd 100644
--- a/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue
+++ b/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 = uploading.value.reduce((total: number, item: UploadingBrowserObject) => {
+const progress = computed((): number => {
+    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%;
+                    }
+                }
             }
         }
 
diff --git a/web/satellite/src/components/modals/objectUpload/UploadItem.vue b/web/satellite/src/components/modals/objectUpload/UploadItem.vue
index 3f12ef9c9..7e013b2a3 100644
--- a/web/satellite/src/components/modals/objectUpload/UploadItem.vue
+++ b/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 {