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