fix(studio): close delete bucket modal immediately after deletion (#47365)

apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx

@@ -27,11 +27,17 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
     schema: 'storage',
   })
 
-  const { mutateAsync: deletePolicy, isPending: isDeletingPolicies } =
-    useDatabasePolicyDeleteMutation()
+  const { mutateAsync: deletePolicy } = useDatabasePolicyDeleteMutation()
 
   const { mutate: deleteBucket, isPending: isDeletingBucket } = useBucketDeleteMutation({
     onSuccess: async () => {
+      // Close the modal and navigate away as soon as the bucket itself is deleted, so
+      // policy cleanup below (which can be slow) doesn't hold the loading state or block
+      // the success feedback.
+      toast.success(`Successfully deleted bucket ${bucket.id}`)
+      onClose()
+      if (bucketId) router.push(`/project/${projectRef}/storage/files`)
+
       if (!project) return console.error('Project is required')
 
       // Clean up policies from the corresponding bucket that was deleted
@@ -42,20 +48,18 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
         return policyBucket === bucket.name
       })
 
+      if (bucketPolicies.length === 0) return
+
       try {
         await Promise.all(
           bucketPolicies.map((policy) =>
             deletePolicy({
-              projectRef: project?.ref,
-              connectionString: project?.connectionString,
+              projectRef: project.ref,
+              connectionString: project.connectionString,
               originalPolicy: policy,
             })
           )
         )
-
-        toast.success(`Successfully deleted bucket ${bucket.id}`)
-        if (!!bucketId) router.push(`/project/${projectRef}/storage/files`)
-        onClose()
       } catch (error) {
         toast.success(
           `Successfully deleted bucket ${bucket.id}. However, there was a problem deleting the policies tied to the bucket. Please review them in the storage policies section`
@@ -76,7 +80,7 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
       size="medium"
       variant="destructive"
       title={`Delete bucket “${bucket.id}”`}
-      loading={isDeletingBucket || isDeletingPolicies}
+      loading={isDeletingBucket}
       confirmPlaceholder="Type bucket name"
       confirmString={bucket.id}
       confirmLabel="Delete bucket"

apps/studio/data/storage/bucket-delete-mutation.ts

@@ -45,9 +45,17 @@ export const useBucketDeleteMutation = ({
   return useMutation<BucketDeleteData, ResponseError, BucketDeleteVariables>({
     mutationFn: (vars) => deleteBucket(vars),
     async onSuccess(data, variables, context) {
-      const { projectRef } = variables
-      await queryClient.invalidateQueries({ queryKey: storageKeys.buckets(projectRef) })
+      const { projectRef, id } = variables
+
+      const deletedBucketQueryKey = storageKeys.bucket(projectRef, id)
+      await queryClient.cancelQueries({ queryKey: deletedBucketQueryKey })
+      queryClient.removeQueries({ queryKey: deletedBucketQueryKey })
+
       await onSuccess?.(data, variables, context)
+
+      // Fire-and-forget: only the bucket list needs refreshing, and it shouldn't block
+      // onSuccess (modal close/navigation) above.
+      void queryClient.invalidateQueries({ queryKey: storageKeys.bucketsList(projectRef) })
     },
     async onError(data, variables, context) {
       if (onError === undefined) {

apps/studio/data/storage/buckets-query.ts

@@ -227,6 +227,11 @@ export const useBucketInfoQueryPreferCached = (bucketId?: string, projectRef?: s
 
 const shouldRetryBucketsQuery = (failureCount: number, error: unknown) => {
   if (error instanceof ResponseError) {
+    // If the bucket doesn't exist or was deleted, don't retry — it will never succeed.
+    if (error.code === 404) {
+      return false
+    }
+
     if (
       error.message.includes('Missing tenant config') ||
       error.message.includes('Project has no active API keys')