Add loading state when searching in column view

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)
       }
     }
 

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('/')