diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.tsx index 5b2a1338398..77de7810008 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.tsx @@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react' import { useProjectSettingsQuery } from 'data/config/project-settings-query' import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query' import { Bucket } from 'data/storage/buckets-query' -import { useLatest, useStore } from 'hooks' +import { useStore } from 'hooks' import { DEFAULT_PROJECT_API_SERVICE_ID, IS_PLATFORM } from 'lib/constants' import { copyToClipboard } from 'lib/helpers' import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' @@ -105,7 +105,7 @@ const StorageExplorer = ({ bucket }: StorageExplorerProps) => { } } else if (view === STORAGE_VIEWS.COLUMNS) { const paths = openedFolders.map((folder: any) => folder.name) - fetchFoldersByPath(paths, itemSearchString) + fetchFoldersByPath(paths, itemSearchString, true) } } diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js index d5d3ddf17e1..1fb1c80ed15 100644 --- a/studio/localStores/storageExplorer/StorageExplorerStore.js +++ b/studio/localStores/storageExplorer/StorageExplorerStore.js @@ -1182,11 +1182,17 @@ class StorageExplorerStore { await this.fetchFoldersByPath(paths) } - fetchFoldersByPath = async (paths, searchString = '') => { + fetchFoldersByPath = async (paths, searchString = '', showLoading = false) => { if (this.selectedBucket.id === undefined) return const pathsWithEmptyPrefix = [''].concat(paths) + if (showLoading) { + this.columns = [this.selectedBucket.name].concat(paths).map((path) => { + return { id: path, name: path, status: STORAGE_ROW_STATUS.LOADING, items: [] } + }) + } + const foldersItems = await Promise.all( pathsWithEmptyPrefix.map(async (path, idx) => { const prefix = paths.slice(0, idx).join('/')