[#67774] frontend: Add loading bar in package upload popup

antmicro · Nov 12, 2024 · 7389044 · 7389044
1 parent 146fb76
commit 7389044
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 10 deletions.
diff --git a/frontend/src/assets/buttons.css b/frontend/src/assets/buttons.css
@@ -63,4 +63,9 @@
     &.small-padding {
         padding: 0.25em;
     }
+
+    &[disabled] {
+        opacity: 40%;
+        pointer-events: none;
+    }
 }
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -8,6 +8,7 @@
 @import './popup.css';
 @import './buttons.css';
 @import './tags.css';
+@import './progress-bar.css';
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap');

diff --git a/frontend/src/assets/progress-bar.css b/frontend/src/assets/progress-bar.css
@@ -0,0 +1,23 @@
+.progress-bar {
+    height: 5px;
+    background-color: var(--accent-100);
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-bar span {
+    width: 100px;
+    position: absolute;
+    height: 5px;
+    background-color: var(--accent-800);
+    animation: progress-bar-animation 1s infinite linear;
+}
+
+@keyframes progress-bar-animation {
+    0% {
+        left: -100px;
+    }
+    100% {
+        left: 140%;
+    }
+}
diff --git a/frontend/src/components/packages/PackagesList.vue b/frontend/src/components/packages/PackagesList.vue
@@ -47,13 +47,25 @@ Component wraps functionality for displaying and working with rdfm packages.
                     </div>
 
                     <div class="buttons">
-                        <button class="action-button gray" @click="closeAddPackagePopup">
+                        <button
+                            :disabled="uploadInProgress"
+                            class="action-button gray"
+                            @click="closeAddPackagePopup"
+                        >
                             Cancel
                         </button>
-                        <button class="action-button blue white" @click="uploadPackage">
+                        <button
+                            :disabled="uploadInProgress"
+                            class="action-button blue white"
+                            @click="uploadPackage"
+                        >
                             Upload
                         </button>
                     </div>
+
+                    <div v-if="uploadInProgress" class="progress-bar">
+                        <span></span>
+                    </div>
                 </div>
             </div>
         </BlurPanel>
@@ -178,6 +190,7 @@ export default {
         // =======================
         // Add package functionality
         // =======================
+        const uploadInProgress = ref(false);
         const uploadedPackageFile: Ref<HTMLInputElement | null> = ref(null);
         const packageUploadData: Reactive<NewPackageData> = reactive({
             version: null,
@@ -192,17 +205,24 @@ export default {
             packageUploadData.version = null;
             packageUploadData.deviceType = null;
             popupOpen.value = PackagePopupOpen.None;
+            uploadInProgress.value = false;
         };
 
         const uploadPackage = async () => {
-            const { success, message } = await uploadPackageRequest(
-                uploadedPackageFile.value!,
-                packageUploadData,
-            );
-            if (!success) {
-                alert(message);
-            } else {
-                closeAddPackagePopup();
+            uploadInProgress.value = true;
+
+            try {
+                const { success, message } = await uploadPackageRequest(
+                    uploadedPackageFile.value!,
+                    packageUploadData,
+                );
+                if (!success) {
+                    alert(message);
+                } else {
+                    closeAddPackagePopup();
+                }
+            } finally {
+                uploadInProgress.value = false;
             }
         };
 
@@ -241,6 +261,8 @@ export default {
         });
 
         onUnmounted(() => {
+            uploadInProgress.value = false;
+
             if (intervalID !== undefined) {
                 clearInterval(intervalID);
             }
@@ -258,6 +280,7 @@ export default {
             uploadedPackageFile,
             packagesCount,
             popupOpen,
+            uploadInProgress,
             packageToRemove,
             closeAddPackagePopup,
             closeRemovePackagePopup,