diff --git a/web/satellite/src/components/modals/OpenBucketModal.vue b/web/satellite/src/components/modals/OpenBucketModal.vue index a8ecbc590..a7449811f 100644 --- a/web/satellite/src/components/modals/OpenBucketModal.vue +++ b/web/satellite/src/components/modals/OpenBucketModal.vue @@ -52,6 +52,10 @@ :is-transparent="isWarningState" /> + @@ -73,6 +77,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore'; import VModal from '@/components/common/VModal.vue'; import VInput from '@/components/common/VInput.vue'; import VButton from '@/components/common/VButton.vue'; +import VLoader from '@/components/common/VLoader.vue'; import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg'; import OpenWarningIcon from '@/../static/images/objects/openWarning.svg'; @@ -148,9 +153,9 @@ async function onContinue(): Promise { closeModal(); analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); - await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); + router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); } catch (error) { - await notify.error(error.message, AnalyticsErrorEventSource.OPEN_BUCKET_MODAL); + notify.error(error.message, AnalyticsErrorEventSource.OPEN_BUCKET_MODAL); isLoading.value = false; } } @@ -182,6 +187,7 @@ function setPassphrase(value: string): void { flex-direction: column; padding: 32px; max-width: 350px; + position: relative; &__header { display: flex; @@ -250,6 +256,23 @@ function setPassphrase(value: string): void { row-gap: 20px; } } + + &__loading-wrap { + position: absolute; + inset: 0; + background: rgb(27 37 51 / 40%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &__label { + font-family: 'font_medium', sans-serif; + font-size: 18px; + margin-top: 16px; + color: var(--c-white); + } + } } .orange-border { diff --git a/web/satellite/src/store/modules/bucketsStore.ts b/web/satellite/src/store/modules/bucketsStore.ts index 8027bb224..87918bfbc 100644 --- a/web/satellite/src/store/modules/bucketsStore.ts +++ b/web/satellite/src/store/modules/bucketsStore.ts @@ -220,11 +220,31 @@ export const useBucketsStore = defineStore('buckets', () => { } async function getObjectsCount(name: string): Promise { - const response = await state.s3Client.send(new ListObjectsV2Command({ - Bucket: name, - })); + const abortController = new AbortController(); - return response.KeyCount === undefined ? 0 : response.KeyCount; + const request = state.s3Client.send(new ListObjectsV2Command({ + Bucket: name, + }), { abortSignal: abortController.signal }); + + const timeout = setTimeout(() => { + abortController.abort(); + }, 10000); // abort request in 10 seconds. + + let response; + try { + response = await request; + clearTimeout(timeout); + } catch (error) { + clearTimeout(timeout); + + if (abortController.signal.aborted) { + return 0; + } + + throw error; + } + + return (!response || response.KeyCount === undefined) ? 0 : response.KeyCount; } function clearS3Data(): void {