From 92a69c7de427866ba28fa2d1e7bc8885b3659c32 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 14 Sep 2023 16:34:55 +0300
Subject: [PATCH] web/satellite: add loader to object browser table

This is a fix based on early feedback from QA team.
Added loader to object browser table so that user can't change pages while request is still in progress because it breaks pagination.

Change-Id: I5cc2ff057955478b3c745c169d520e1a639eff92
---
 .../src/components/browser/FileBrowser.vue    | 74 +++++++++----------
 .../components/common/TableSizeChanger.vue    | 12 ++-
 .../src/components/common/VTable.vue          | 18 +++++
 .../components/dialogs/DeleteFolderDialog.vue |  2 +-
 4 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index a9a06a7de..fd45934b1 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -111,6 +111,7 @@
                         :total-page-count="isPaginationEnabled ? pageCount : 0"
                         :total-items-count="isPaginationEnabled ? fetchedObjectsCount : files.length"
                         show-select
+                        :loading="isLoading"
                         class="file-browser-table"
                         :on-page-change="isPaginationEnabled ? changePageAndLimit : null"
                         @selectAllClicked="toggleSelectAllFiles"
@@ -193,7 +194,7 @@
                         </template>
                     </v-table>
                     <div
-                        v-if="!fetchingFilesSpinner"
+                        v-if="!isLoading"
                         class="upload-help"
                         @click="buttonFileUpload"
                     >
@@ -202,12 +203,6 @@
                             Drop Files Here to Upload
                         </p>
                     </div>
-                    <div
-                        v-else
-                        class="d-flex justify-content-center"
-                    >
-                        <div class="spinner-border" />
-                    </div>
                 </div>
             </div>
         </div>
@@ -239,6 +234,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
+import { useLoading } from '@/composables/useLoading';
 
 import VButton from '@/components/common/VButton.vue';
 import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@@ -261,11 +257,11 @@ const analyticsStore = useAnalyticsStore();
 const router = useRouter();
 const route = useRoute();
 const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
 
 const folderInput = ref<HTMLInputElement>();
 const fileInput = ref<HTMLInputElement>();
 
-const fetchingFilesSpinner = ref<boolean>(false);
 const isUploadDropDownShown = ref<boolean>(false);
 const isLockedBanner = ref<boolean>(true);
 const isTooManyObjectsBanner = ref<boolean>(true);
@@ -363,7 +359,7 @@ const objectsCount = computed((): number => {
 const lockedFilesEntryDisplayed = computed((): boolean => {
     return lockedFilesCount.value > 0 &&
         objectsCount.value <= NUMBER_OF_DISPLAYED_OBJECTS &&
-        !fetchingFilesSpinner.value &&
+        !isLoading.value &&
         !currentPath.value;
 });
 
@@ -444,7 +440,7 @@ const bucket = computed((): string => {
 /**
  * Changes table page and limit.
  */
-function changePageAndLimit(page: number, limit: number): void {
+async function changePageAndLimit(page: number, limit: number): void {
     obStore.setCursor({ limit, page });
 
     const lastObjectOnPage = page * limit;
@@ -454,15 +450,17 @@ function changePageAndLimit(page: number, limit: number): void {
         return;
     }
 
-    const tokenKey = Math.ceil(lastObjectOnPage / MAX_KEY_COUNT) * MAX_KEY_COUNT;
+    await withLoading(async () => {
+        const tokenKey = Math.ceil(lastObjectOnPage / MAX_KEY_COUNT) * MAX_KEY_COUNT;
 
-    const tokenToBeFetched = obStore.state.continuationTokens.get(tokenKey);
-    if (!tokenToBeFetched) {
-        obStore.initList(routePath.value);
-        return;
-    }
+        const tokenToBeFetched = obStore.state.continuationTokens.get(tokenKey);
+        if (!tokenToBeFetched) {
+            await obStore.initList(routePath.value);
+            return;
+        }
 
-    obStore.listByToken(routePath.value, tokenKey, tokenToBeFetched);
+        await obStore.listByToken(routePath.value, tokenKey, tokenToBeFetched);
+    });
 }
 
 /**
@@ -496,11 +494,13 @@ async function onRouteChange(): Promise<void> {
     routePath.value = calculateRoutePath();
     obStore.closeDropdown();
 
-    if (isPaginationEnabled.value) {
-        await obStore.initList(routePath.value);
-    } else {
-        await list(routePath.value);
-    }
+    await withLoading(async () => {
+        if (isPaginationEnabled.value) {
+            await obStore.initList(routePath.value);
+        } else {
+            await list(routePath.value);
+        }
+    });
 }
 
 /**
@@ -653,24 +653,20 @@ onBeforeMount(async () => {
     // clear previous file selections.
     obStore.clearAllSelectedFiles();
 
-    // display the spinner while files are being fetched
-    fetchingFilesSpinner.value = true;
-
-    try {
-        if (isPaginationEnabled.value) {
-            await obStore.initList('');
-        } else {
-            await Promise.all([
-                list(''),
-                obStore.getObjectCount(),
-            ]);
+    await withLoading(async () => {
+        try {
+            if (isPaginationEnabled.value) {
+                await obStore.initList('');
+            } else {
+                await Promise.all([
+                    list(''),
+                    obStore.getObjectCount(),
+                ]);
+            }
+        } catch (err) {
+            notify.error(err.message, AnalyticsErrorEventSource.FILE_BROWSER_LIST_CALL);
         }
-    } catch (err) {
-        notify.error(err.message, AnalyticsErrorEventSource.FILE_BROWSER_LIST_CALL);
-    }
-
-    // remove the spinner after files have been fetched
-    fetchingFilesSpinner.value = false;
+    });
 });
 
 onBeforeUnmount(() => {
diff --git a/web/satellite/src/components/common/TableSizeChanger.vue b/web/satellite/src/components/common/TableSizeChanger.vue
index 9bfc1d3a5..ddd272eb3 100644
--- a/web/satellite/src/components/common/TableSizeChanger.vue
+++ b/web/satellite/src/components/common/TableSizeChanger.vue
@@ -10,7 +10,7 @@
                 <span v-else class="size-changer__selector__content__label">Size</span>
                 <arrow-down-icon class="size-changer__selector__content__arrow" :class="{ open: isOpen }" />
             </div>
-            <div v-if="isOpen" v-click-outside="closeSelector" class="size-changer__selector__dropdown">
+            <div v-if="isOpen" v-click-outside="closeSelector" class="size-changer__selector__dropdown" :class="{ 'custom-top': !withAllOption }">
                 <div
                     v-for="(option, index) in options"
                     :key="index"
@@ -54,12 +54,16 @@ const options = computed((): {label:string, value:number}[] => {
         { label: '50', value: 50 },
         { label: '100', value: 100 },
     ];
-    if (props.itemCount && props.itemCount < 1000 && !props.simplePagination) {
+    if (props.itemCount && withAllOption.value) {
         return [{ label: 'All', value: props.itemCount }, ...opts];
     }
     return opts;
 });
 
+const withAllOption = computed<boolean>(() => {
+    return props.itemCount !== undefined && props.itemCount < 1000 && !props.simplePagination;
+});
+
 /**
  * whether the selector drop down is open
  * */
@@ -191,4 +195,8 @@ function toggleSelector() {
         }
     }
 }
+
+.custom-top {
+    top: -150px;
+}
 </style>
diff --git a/web/satellite/src/components/common/VTable.vue b/web/satellite/src/components/common/VTable.vue
index 69fc7073d..bea3d12ce 100644
--- a/web/satellite/src/components/common/VTable.vue
+++ b/web/satellite/src/components/common/VTable.vue
@@ -3,6 +3,9 @@
 
 <template>
     <div class="table-wrapper">
+        <div v-if="loading" class="table-wrapper__loader">
+            <VLoader width="100px" height="100px" />
+        </div>
         <table class="base-table" border="0" cellpadding="0" cellspacing="0">
             <thead>
                 <tr>
@@ -38,6 +41,7 @@ import { PageChangeCallback } from '@/types/pagination';
 
 import TablePagination from '@/components/common/TablePagination.vue';
 import VTableCheckbox from '@/components/common/VTableCheckbox.vue';
+import VLoader from '@/components/common/VLoader.vue';
 
 const props = withDefaults(defineProps<{
     itemsLabel?: string,
@@ -52,6 +56,7 @@ const props = withDefaults(defineProps<{
     selected?: boolean,
     showSelect?: boolean,
     simplePagination?: boolean,
+    loading?: boolean,
 }>(), {
     selectable: false,
     selected: false,
@@ -65,6 +70,7 @@ const props = withDefaults(defineProps<{
     onNextClicked: null,
     onPreviousClicked: null,
     onPageSizeChanged: null,
+    loading: false,
 });
 
 const emit = defineEmits(['selectAllClicked']);
@@ -74,6 +80,18 @@ const emit = defineEmits(['selectAllClicked']);
 .table-wrapper {
     background: #fff;
     border-radius: 12px;
+    position: relative;
+
+    &__loader {
+        border-radius: 12px;
+        z-index: 1;
+        background-color: rgb(0 0 0 / 5%);
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 .base-table {
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DeleteFolderDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DeleteFolderDialog.vue
index 09cca55cd..dfee3d9c1 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DeleteFolderDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DeleteFolderDialog.vue
@@ -8,7 +8,7 @@
         transition="fade-transition"
         :persistent="isLoading"
     >
-        <v-card rounded="xlg" ref="innerContent">
+        <v-card ref="innerContent" rounded="xlg">
             <v-card-item class="pl-7 py-4">
                 <template #prepend>
                     <v-sheet