chore: Migrate all isPending uses in react-query (#40642)

* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.

apps/studio/components/grid/components/editor/JsonEditor.tsx

@@ -73,7 +73,7 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
   const [isPopoverOpen, setIsPopoverOpen] = useState(true)
   const [value, setValue] = useState<string | null>(jsonString)
 
-  const { mutate: getCellValue, isLoading, isSuccess } = useGetCellValueMutation()
+  const { mutate: getCellValue, isPending, isSuccess } = useGetCellValueMutation()
 
   const loadFullValue = () => {
     if (selectedTable === undefined || project === undefined || !isTableLike(selectedTable)) return
@@ -167,7 +167,7 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
               value={value ?? ''}
               language="markdown"
             />
-            <TruncatedWarningOverlay isLoading={isLoading} loadFullValue={loadFullValue} />
+            <TruncatedWarningOverlay isLoading={isPending} loadFullValue={loadFullValue} />
           </div>
         ) : (
           <BlockKeys value={value} onEscape={cancelChanges} onEnter={saveChanges}>

apps/studio/components/grid/components/editor/TextEditor.tsx

@@ -45,7 +45,7 @@ export const TextEditor = <TRow, TSummaryRow = unknown>({
   const [value, setValue] = useState<string | null>(initialValue)
   const [isConfirmNextModalOpen, setIsConfirmNextModalOpen] = useState(false)
 
-  const { mutate: getCellValue, isLoading, isSuccess } = useGetCellValueMutation()
+  const { mutate: getCellValue, isPending, isSuccess } = useGetCellValueMutation()
 
   const isTruncated = isValueTruncated(initialValue)
 
@@ -121,7 +121,7 @@ export const TextEditor = <TRow, TSummaryRow = unknown>({
                 value={value ?? ''}
                 language="markdown"
               />
-              <TruncatedWarningOverlay isLoading={isLoading} loadFullValue={loadFullValue} />
+              <TruncatedWarningOverlay isLoading={isPending} loadFullValue={loadFullValue} />
             </div>
           ) : (
             <BlockKeys

apps/studio/components/interfaces/APIKeys/APIKeyDeleteDialog.tsx

@@ -2,8 +2,8 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Trash2 } from 'lucide-react'
 
 import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import type { APIKeysData } from 'data/api-keys/api-keys-query'
+import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 
 interface APIKeyDeleteDialogProps {
   apiKey: Extract<APIKeysData[number], { type: 'secret' | 'publishable' }>

apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx

@@ -51,7 +51,7 @@ function CreatePublishableAPIKeyDialog() {
     },
   })
 
-  const { mutate: createAPIKey, isLoading: isCreatingAPIKey } = useAPIKeyCreateMutation()
+  const { mutate: createAPIKey, isPending: isCreatingAPIKey } = useAPIKeyCreateMutation()
 
   const onSubmit: SubmitHandler<z.infer<typeof SCHEMA>> = async (values) => {
     createAPIKey(

apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx

@@ -64,7 +64,7 @@ const CreateSecretAPIKeyDialog = () => {
     },
   })
 
-  const { mutate: createAPIKey, isLoading: isCreatingAPIKey } = useAPIKeyCreateMutation()
+  const { mutate: createAPIKey, isPending: isCreatingAPIKey } = useAPIKeyCreateMutation()
 
   const onSubmit: SubmitHandler<z.infer<typeof SCHEMA>> = async (values) => {
     createAPIKey(

apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx

@@ -9,7 +9,6 @@ import { useAPIKeyDeleteMutation } from 'data/api-keys/api-key-delete-mutation'
 import type { APIKeysData } from 'data/api-keys/api-keys-query'
 import { useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import useLogsQuery from 'hooks/analytics/useLogsQuery'
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
 import { Card, EyeOffIcon } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -87,7 +86,7 @@ export const SecretAPIKeys = () => {
       handleErrorOnDelete(deletingAPIKeyIdRef, selectedId, `API Key not found`),
   })
 
-  const { mutate: deleteAPIKey, isLoading: isDeletingAPIKey } = useAPIKeyDeleteMutation({
+  const { mutate: deleteAPIKey, isPending: isDeletingAPIKey } = useAPIKeyDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully deleted API key`)
       setAPIKeyToDelete(null)

apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx

@@ -67,7 +67,7 @@ export const NewAccessTokenDialog = ({
     defaultValues: { tokenName: '', expiresAt: ExpiresAtOptions['month'].value },
     mode: 'onChange',
   })
-  const { mutate: createAccessToken, isLoading } = useAccessTokenCreateMutation()
+  const { mutate: createAccessToken, isPending } = useAccessTokenCreateMutation()
 
   const onSubmit: SubmitHandler<z.infer<typeof TokenSchema>> = async (values) => {
     // Use custom date if custom option is selected
@@ -240,7 +240,7 @@ export const NewAccessTokenDialog = ({
         <DialogFooter>
           <Button
             type="default"
-            disabled={isLoading}
+            disabled={isPending}
             onClick={() => {
               form.reset()
               setCustomExpiryDate(undefined)
@@ -250,7 +250,7 @@ export const NewAccessTokenDialog = ({
           >
             Cancel
           </Button>
-          <Button form={formId} htmlType="submit" loading={isLoading}>
+          <Button form={formId} htmlType="submit" loading={isPending}>
             Generate token
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx

@@ -15,7 +15,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
@@ -34,7 +33,7 @@ export const AccountConnections = () => {
 
   const isConnected = gitHubAuthorization !== null
 
-  const { mutate: removeAuthorization, isLoading: isRemoving } =
+  const { mutate: removeAuthorization, isPending: isRemoving } =
     useGitHubAuthorizationDeleteMutation({
       onSuccess: () => {
         toast.success('GitHub authorization removed successfully')

apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx

@@ -50,7 +50,7 @@ export const AccountIdentities = () => {
   const [selectedProviderUnlink, setSelectedProviderUnlink] = useState<string>()
   const [selectedProviderUpdateEmail, setSelectedProviderUpdateEmail] = useState<string>()
 
-  const { mutate: unlinkIdentity, isLoading: isUnlinking } = useUnlinkIdentityMutation({
+  const { mutate: unlinkIdentity, isPending: isUnlinking } = useUnlinkIdentityMutation({
     onSuccess: () => {
       toast.success(
         `Successfully unlinked ${getProviderName(selectedProviderUnlink ?? '')} identity!`

apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx

@@ -66,7 +66,7 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
     defaultValues: { email: '' },
   })
 
-  const { mutate: updateEmail, isLoading } = useEmailUpdateMutation({
+  const { mutate: updateEmail, isPending } = useEmailUpdateMutation({
     onSuccess: (_, vars) => {
       toast.success(
         `A confirmation email has been sent to ${vars.email}. Please confirm the change within 10 minutes.`
@@ -121,10 +121,10 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
         </DialogSection>
 
         <DialogFooter>
-          <Button type="default" disabled={isLoading} onClick={onClose}>
+          <Button type="default" disabled={isPending} onClick={onClose}>
             Cancel
           </Button>
-          <Button htmlType="submit" loading={isLoading} disabled={isLoading}>
+          <Button htmlType="submit" loading={isPending} disabled={isPending}>
             Confirm
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx

@@ -65,7 +65,7 @@ export const DeleteAccountButton = () => {
   })
   const { account } = form.watch()
 
-  const { mutate: submitSupportTicket, isLoading } = useSendSupportTicketMutation({
+  const { mutate: submitSupportTicket, isPending } = useSendSupportTicketMutation({
     onSuccess: () => {
       setIsOpen(false)
       setDeletionRequestFlag()
@@ -171,7 +171,7 @@ export const DeleteAccountButton = () => {
                               autoFocus
                               {...field}
                               autoComplete="off"
-                              disabled={isLoading}
+                              disabled={isPending}
                               placeholder="Enter the account above"
                             />
                           </FormControl_Shadcn_>
@@ -186,8 +186,8 @@ export const DeleteAccountButton = () => {
                       size="small"
                       type="danger"
                       htmlType="submit"
-                      loading={isLoading}
-                      disabled={account !== accountEmail || isLoading}
+                      loading={isPending}
+                      disabled={account !== accountEmail || isPending}
                     >
                       Submit request for account deletion
                     </Button>

apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx

@@ -59,7 +59,7 @@ export const ProfileInformation = () => {
     values: defaultValues,
   })
 
-  const { mutate: updateProfile, isLoading } = useProfileUpdateMutation({
+  const { mutate: updateProfile, isPending } = useProfileUpdateMutation({
     onSuccess: (data) => {
       toast.success('Successfully saved profile')
       const { first_name, last_name, username, primary_email } = data
@@ -175,7 +175,7 @@ export const ProfileInformation = () => {
             <Button
               type="primary"
               htmlType="submit"
-              loading={isLoading || isIdentitiesLoading}
+              loading={isPending || isIdentitiesLoading}
               disabled={!form.formState.isDirty}
             >
               Save

apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx

@@ -21,7 +21,7 @@ interface AddNewFactorModalProps {
 export const AddNewFactorModal = ({ visible, onClose }: AddNewFactorModalProps) => {
   // Generate a name with a number between 0 and 1000
   const [name, setName] = useState(`App ${Math.floor(Math.random() * 1000)}`)
-  const { data, mutate: enroll, isLoading: isEnrolling, reset } = useMfaEnrollMutation()
+  const { data, mutate: enroll, isPending: isEnrolling, reset } = useMfaEnrollMutation()
 
   useEffect(() => {
     // reset has to be called because the state is kept between if the process is canceled during
@@ -122,7 +122,7 @@ const SecondStep = ({
   )
 
   const { mutate: unenroll } = useMfaUnenrollMutation({ onSuccess: () => onClose() })
-  const { mutate: challengeAndVerify, isLoading: isVerifying } = useMfaChallengeAndVerifyMutation({
+  const { mutate: challengeAndVerify, isPending: isVerifying } = useMfaChallengeAndVerifyMutation({
     onError: (error) => {
       toast.error(`Failed to add a second factor authentication:  ${error?.message}`)
     },

apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx

@@ -26,7 +26,7 @@ const DeleteFactorModal = ({
     ''
   )
 
-  const { mutate: unenroll, isLoading } = useMfaUnenrollMutation({
+  const { mutate: unenroll, isPending } = useMfaUnenrollMutation({
     onSuccess: async () => {
       if (lastVisitedOrganization) {
         await queryClient.invalidateQueries({
@@ -46,7 +46,7 @@ const DeleteFactorModal = ({
       title="Confirm to delete factor"
       confirmLabel="Delete"
       confirmLabelLoading="Deleting"
-      loading={isLoading}
+      loading={isPending}
       onCancel={onClose}
       onConfirm={() => factorId && unenroll({ factorId })}
       alert={{

apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx

@@ -59,7 +59,7 @@ export const AdvisorRuleItem = ({ lint }: AdvisorRuleItemProps) => {
   const selectedRuleMeta = data.exceptions.find((x) => x.id === selectedRuleToDelete)
   const selectedMemberForRule = members.find((x) => x.gotrue_id === selectedRuleMeta?.assigned_to)
 
-  const { mutate: deleteRule, isLoading: isDeleting } = useLintRuleDeleteMutation({
+  const { mutate: deleteRule, isPending: isDeleting } = useLintRuleDeleteMutation({
     onSuccess: () => {
       toast.success('Successfully deleted rule')
       setSelectedRuleToDelete(undefined)

apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx

@@ -73,7 +73,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
   const { data: organization } = useSelectedOrganizationQuery()
   const { data: members = [] } = useOrganizationMembersQuery({ slug: organization?.slug })
 
-  const { mutate: createRule, isLoading: isCreating } = useLintRuleCreateMutation({
+  const { mutate: createRule, isPending: isCreating } = useLintRuleCreateMutation({
     onSuccess: (_, vars) => {
       const ruleLint = vars.exception.lint_name
       const ruleLintMeta = lintInfoMap.find((x) => x.name === ruleLint)

apps/studio/components/interfaces/Advisors/DisableRuleModal.tsx

@@ -29,7 +29,7 @@ export const DisableRuleModal = ({ lint }: DisableRuleModalProps) => {
 
   const [open, setOpen] = useState(false)
 
-  const { mutate: createRule, isLoading: isCreating } = useLintRuleCreateMutation({
+  const { mutate: createRule, isPending: isCreating } = useLintRuleCreateMutation({
     onSuccess: (_, vars) => {
       const ruleLint = vars.exception.lint_name
       const ruleLintMeta = lintInfoMap.find((x) => x.name === ruleLint)

apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx

@@ -29,7 +29,7 @@ export const EnableRuleModal = ({ lint, rule }: EnableRuleModalProps) => {
 
   const [open, setOpen] = useState(false)
 
-  const { mutate: deleteRule, isLoading: isDeleting } = useLintRuleDeleteMutation({
+  const { mutate: deleteRule, isPending: isDeleting } = useLintRuleDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully enabled the "${lint.title}" rule`)
       setOpen(false)

apps/studio/components/interfaces/Auth/AuditLogsForm.tsx

@@ -57,7 +57,7 @@ export const AuditLogsForm = () => {
     isLoading,
   } = useAuthConfigQuery({ projectRef })
 
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation({
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({
     onError: (error) => {
       toast.error(`Failed to update audit logs: ${error?.message}`)
     },

apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx

@@ -38,7 +38,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
   const [urlProvider, setUrlProvider] = useQueryState('provider', { defaultValue: '' })
 
   const [open, setOpen] = useState(false)
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation()
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
 
   const { can: canUpdateConfig } = useAsyncCheckPermissions(
     PermissionAction.UPDATE,

apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx

@@ -54,7 +54,7 @@ export const BasicAuthSettingsForm = () => {
     isSuccess,
     isLoading,
   } = useAuthConfigQuery({ projectRef })
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation()
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
 
   const { can: canReadConfig, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions(
     PermissionAction.READ,

apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx

@@ -84,7 +84,7 @@ export const EmailTemplates = () => {
     isSuccess,
   } = useAuthConfigQuery({ projectRef })
 
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation({
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({
     onError: (error) => {
       toast.error(`Failed to update settings: ${error?.message}`)
     },

apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx

@@ -187,7 +187,7 @@ export const CreateHookSheet = ({
     return permissionChanges
   }, [hook, values.postgresValues.schema, values.postgresValues.functionName])
 
-  const { mutate: updateAuthHooks, isLoading: isUpdatingAuthHooks } = useAuthHooksUpdateMutation({
+  const { mutate: updateAuthHooks, isPending: isUpdatingAuthHooks } = useAuthHooksUpdateMutation({
     onSuccess: () => {
       toast.success(`Successfully created ${values.hookType}.`)
       if (statements.length > 0) {

apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx

@@ -31,7 +31,7 @@ export const HooksListing = () => {
 
   const [selectedHookForDeletion, setSelectedHookForDeletion] = useState<Hook | null>(null)
 
-  const { mutate: updateAuthHooks, isLoading: isDeletingAuthHook } = useAuthHooksUpdateMutation({
+  const { mutate: updateAuthHooks, isPending: isDeletingAuthHook } = useAuthHooksUpdateMutation({
     onSuccess: async () => {
       if (!selectedHookForDeletion) return
 

apps/studio/components/interfaces/Auth/OAuthApps/CreateOAuthAppSheet.tsx

@@ -84,7 +84,7 @@ export const CreateOAuthAppSheet = ({ visible, onSuccess, onCancel }: CreateOAut
 
   const { data: supabaseClientData } = useSupabaseClientQuery({ projectRef })
 
-  const { mutateAsync: createOAuthApp, isLoading: isCreating } = useOAuthServerAppCreateMutation({
+  const { mutateAsync: createOAuthApp, isPending: isCreating } = useOAuthServerAppCreateMutation({
     onSuccess: (data) => {
       toast.success(`Successfully created OAuth app "${data.client_name}"`)
       onSuccess(data)

apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx

@@ -71,7 +71,7 @@ export const OAuthAppsList = () => {
     { enabled: isOAuthServerEnabled }
   )
 
-  const { mutateAsync: regenerateSecret, isLoading: isRegenerating } =
+  const { mutateAsync: regenerateSecret, isPending: isRegenerating } =
     useOAuthServerAppRegenerateSecretMutation({
       onSuccess: (data) => {
         if (data) {

apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx

@@ -81,7 +81,7 @@ export const OAuthServerSettingsForm = () => {
     isLoading: isAuthConfigLoading,
     isSuccess,
   } = useAuthConfigQuery({ projectRef })
-  const { mutate: updateAuthConfig, isLoading } = useAuthConfigUpdateMutation({
+  const { mutate: updateAuthConfig, isPending } = useAuthConfigUpdateMutation({
     onSuccess: () => {
       toast.success('OAuth server settings updated successfully')
     },
@@ -346,14 +346,14 @@ export const OAuthServerSettingsForm = () => {
                 )}
 
                 <CardFooter className="justify-end space-x-2">
-                  <Button type="default" onClick={() => form.reset()} disabled={isLoading}>
+                  <Button type="default" onClick={() => form.reset()} disabled={isPending}>
                     Cancel
                   </Button>
                   <Button
                     type="primary"
                     htmlType="submit"
                     disabled={!canUpdateConfig || !form.formState.isDirty}
-                    loading={isLoading}
+                    loading={isPending}
                   >
                     Save changes
                   </Button>

apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx

@@ -122,7 +122,7 @@ export const PolicyEditorPanel = memo(function ({
   const supportWithCheck = ['update', 'all'].includes(command)
   const isRenamingPolicy = selectedPolicy !== undefined && name !== selectedPolicy.name
 
-  const { mutate: executeMutation, isLoading: isExecuting } = useExecuteSqlMutation({
+  const { mutate: executeMutation, isPending: isExecuting } = useExecuteSqlMutation({
     onSuccess: async () => {
       // refresh all policies
       await queryClient.invalidateQueries({ queryKey: databasePoliciesKeys.list(ref) })
@@ -132,7 +132,7 @@ export const PolicyEditorPanel = memo(function ({
     onError: (error) => setError(error),
   })
 
-  const { mutate: updatePolicy, isLoading: isUpdating } = useDatabasePolicyUpdateMutation({
+  const { mutate: updatePolicy, isPending: isUpdating } = useDatabasePolicyUpdateMutation({
     onSuccess: () => {
       toast.success('Successfully updated policy')
       onSelectCancel()

apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx

@@ -76,7 +76,7 @@ export const ProtectionAuthSettingsForm = () => {
     isError,
     isLoading,
   } = useAuthConfigQuery({ projectRef })
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation({
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({
     onError: (error) => {
       toast.error(`Failed to update settings: ${error?.message}`)
     },

apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx

@@ -48,7 +48,7 @@ export const RateLimits = () => {
     isError,
     isSuccess,
   } = useAuthConfigQuery({ projectRef })
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation({
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({
     onSuccess: () => {
       toast.success('Rate limits successfully updated')
     },

apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx

@@ -5,6 +5,7 @@ import { useFieldArray, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
+import { Label } from '@ui/components/shadcn/ui/label'
 import { useParams } from 'common'
 import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
 import {
@@ -19,7 +20,6 @@ import {
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { Label } from '@ui/components/shadcn/ui/label'
 import { urlRegex } from '../Auth.constants'
 
 const MAX_URLS_LENGTH = 2 * 1024
@@ -32,7 +32,7 @@ interface AddNewURLModalProps {
 
 export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalProps) => {
   const { ref } = useParams()
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation()
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
 
   const FormSchema = z.object({
     urls: z

apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx

@@ -29,7 +29,7 @@ export const RedirectUrls = () => {
     isError,
     isSuccess,
   } = useAuthConfigQuery({ projectRef })
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation()
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
 
   const URI_ALLOW_LIST_ARRAY = useMemo(() => {
     return authConfig?.URI_ALLOW_LIST

apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx

@@ -46,7 +46,7 @@ interface SmtpFormValues {
 export const SmtpForm = () => {
   const { ref: projectRef } = useParams()
   const { data: authConfig, error: authConfigError, isError } = useAuthConfigQuery({ projectRef })
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation()
+  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
 
   const [enableSmtp, setEnableSmtp] = useState(false)
   const [hidden, setHidden] = useState(true)

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx

@@ -50,7 +50,7 @@ export const CreateAuth0IntegrationDialog = ({
   const isCreating = true
 
   const { ref: projectRef } = useParams()
-  const { mutate: createAuthIntegration, isLoading } = useCreateThirdPartyAuthIntegrationMutation({
+  const { mutate: createAuthIntegration, isPending } = useCreateThirdPartyAuthIntegrationMutation({
     onSuccess: () => {
       toast.success(`Successfully created a new Auth0 Auth integration.`)
       onClose()
@@ -169,10 +169,10 @@ export const CreateAuth0IntegrationDialog = ({
             </div>
           )}
 
-          <Button disabled={isLoading} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} type="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isLoading} loading={isLoading}>
+          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx

@@ -53,7 +53,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
   const isCreating = true
 
   const { ref: projectRef } = useParams()
-  const { mutate: createAuthIntegration, isLoading } = useCreateThirdPartyAuthIntegrationMutation({
+  const { mutate: createAuthIntegration, isPending } = useCreateThirdPartyAuthIntegrationMutation({
     onSuccess: () => {
       toast.success(`Successfully created a new Amazon Cognito Auth integration.`)
       onClose()
@@ -179,10 +179,10 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
             </div>
           )}
 
-          <Button disabled={isLoading} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} type="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isLoading} loading={isLoading}>
+          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx

@@ -1,11 +1,11 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
 import { useCreateThirdPartyAuthIntegrationMutation } from 'data/third-party-auth/integration-create-mutation'
 import {
   Button,
@@ -22,7 +22,6 @@ import {
   Separator,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { InlineLink } from 'components/ui/InlineLink'
 
 interface CreateClerkAuthIntegrationProps {
   visible: boolean
@@ -60,7 +59,7 @@ export const CreateClerkAuthIntegrationDialog = ({
   onDelete,
 }: CreateClerkAuthIntegrationProps) => {
   const { ref: projectRef } = useParams()
-  const { mutate: createAuthIntegration, isLoading } = useCreateThirdPartyAuthIntegrationMutation({
+  const { mutate: createAuthIntegration, isPending } = useCreateThirdPartyAuthIntegrationMutation({
     onSuccess: () => {
       toast.success(`Successfully created a new Clerk integration.`)
       onClose()
@@ -138,10 +137,10 @@ export const CreateClerkAuthIntegrationDialog = ({
           </Form_Shadcn_>
         </DialogSection>
         <DialogFooter>
-          <Button disabled={isLoading} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} type="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isLoading} loading={isLoading}>
+          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
             Create connection
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx

@@ -50,7 +50,7 @@ export const CreateFirebaseAuthIntegrationDialog = ({
   const isCreating = true
 
   const { ref: projectRef } = useParams()
-  const { mutate: createAuthIntegration, isLoading } = useCreateThirdPartyAuthIntegrationMutation({
+  const { mutate: createAuthIntegration, isPending } = useCreateThirdPartyAuthIntegrationMutation({
     onSuccess: () => {
       toast.success(`Successfully created a new Firebase Auth integration.`)
       onClose()
@@ -151,10 +151,10 @@ export const CreateFirebaseAuthIntegrationDialog = ({
             </div>
           )}
 
-          <Button disabled={isLoading} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} type="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isLoading} loading={isLoading}>
+          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx

@@ -56,7 +56,7 @@ export const CreateWorkOSIntegrationDialog = ({
   const isCreating = true
 
   const { ref: projectRef } = useParams()
-  const { mutate: createAuthIntegration, isLoading } = useCreateThirdPartyAuthIntegrationMutation({
+  const { mutate: createAuthIntegration, isPending } = useCreateThirdPartyAuthIntegrationMutation({
     onSuccess: () => {
       toast.success(`Successfully created a new WorkOS integration.`)
       onClose()
@@ -160,10 +160,10 @@ export const CreateWorkOSIntegrationDialog = ({
             </div>
           )}
 
-          <Button disabled={isLoading} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} type="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isLoading} loading={isLoading}>
+          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>

apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx

@@ -33,7 +33,7 @@ interface BanUserModalProps {
 export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
   const { ref: projectRef } = useParams()
 
-  const { mutate: updateUser, isLoading: isBanningUser } = useUserUpdateMutation({
+  const { mutate: updateUser, isPending: isBanningUser } = useUserUpdateMutation({
     onSuccess: (_, vars) => {
       const bannedUntil = dayjs()
         .add(Number(vars.banDuration), 'hours')

apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx

@@ -43,7 +43,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
     'create_user'
   )
 
-  const { mutate: createUser, isLoading: isCreatingUser } = useUserCreateMutation({
+  const { mutate: createUser, isPending: isCreatingUser } = useUserCreateMutation({
     onSuccess(res) {
       toast.success(`Successfully created user: ${res.email}`)
       form.reset({ email: '', password: '', autoConfirmUser: true })

apps/studio/components/interfaces/Auth/Users/DeleteUserModal.tsx

@@ -20,7 +20,7 @@ export const DeleteUserModal = ({
 }: DeleteUserModalProps) => {
   const { ref: projectRef } = useParams()
 
-  const { mutate: deleteUser, isLoading: isDeleting } = useUserDeleteMutation({
+  const { mutate: deleteUser, isPending: isDeleting } = useUserDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully deleted ${selectedUser?.email}`)
       onDeleteSuccess?.()

apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx

@@ -16,7 +16,7 @@ const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
   const { ref: projectRef } = useParams()
 
   const handleToggle = () => setVisible(!visible)
-  const { mutate: inviteUser, isLoading: isInviting } = useUserInviteMutation({
+  const { mutate: inviteUser, isPending: isInviting } = useUserInviteMutation({
     onSuccess: (_, variables) => {
       toast.success(`Sent invite email to ${variables.email}`)
       setVisible(false)

apps/studio/components/interfaces/Auth/Users/UserOverview.tsx

@@ -99,7 +99,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
   const seconds = Math.floor(mailerOtpExpiry % 60)
   const formattedExpiry = `${mailerOtpExpiry > 60 ? `${minutes} minute${minutes > 1 ? 's' : ''} ${seconds > 0 ? 'and' : ''} ` : ''}${seconds > 0 ? `${seconds} second${seconds > 1 ? 's' : ''}` : ''}`
 
-  const { mutate: resetPassword, isLoading: isResettingPassword } = useUserResetPasswordMutation({
+  const { mutate: resetPassword, isPending: isResettingPassword } = useUserResetPasswordMutation({
     onSuccess: (_, vars) => {
       setSuccessAction('send_recovery')
       toast.success(`Sent password recovery to ${vars.user.email}`)
@@ -108,7 +108,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
       toast.error(`Failed to send password recovery: ${err.message}`)
     },
   })
-  const { mutate: sendMagicLink, isLoading: isSendingMagicLink } = useUserSendMagicLinkMutation({
+  const { mutate: sendMagicLink, isPending: isSendingMagicLink } = useUserSendMagicLinkMutation({
     onSuccess: (_, vars) => {
       setSuccessAction('send_magic_link')
       toast.success(
@@ -125,7 +125,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
       )
     },
   })
-  const { mutate: sendOTP, isLoading: isSendingOTP } = useUserSendOTPMutation({
+  const { mutate: sendOTP, isPending: isSendingOTP } = useUserSendOTPMutation({
     onSuccess: (_, vars) => {
       setSuccessAction('send_otp')
       toast.success(`Sent OTP to ${vars.user.phone}`)
@@ -140,7 +140,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
       setIsDeleteFactorsModalOpen(false)
     },
   })
-  const { mutate: updateUser, isLoading: isUpdatingUser } = useUserUpdateMutation({
+  const { mutate: updateUser, isPending: isUpdatingUser } = useUserUpdateMutation({
     onSuccess: () => {
       toast.success('Successfully unbanned user')
       setIsUnbanModalOpen(false)

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/ChangePaymentMethodModal.tsx

@@ -15,7 +15,7 @@ const ChangePaymentMethodModal = ({
   onClose,
 }: ChangePaymentMethodModalProps) => {
   const { slug } = useParams()
-  const { mutate: markAsDefault, isLoading: isUpdating } =
+  const { mutate: markAsDefault, isPending: isUpdating } =
     useOrganizationPaymentMethodMarkAsDefaultMutation({
       onSuccess: () => {
         toast.success(

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx

@@ -17,7 +17,7 @@ const DeletePaymentMethodModal = ({
 }: DeletePaymentMethodModalProps) => {
   const { slug } = useParams()
 
-  const { mutate: deletePayment, isLoading: isDeleting } =
+  const { mutate: deletePayment, isPending: isDeleting } =
     useOrganizationPaymentMethodDeleteMutation({
       onSuccess: () => {
         toast.success(

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -177,12 +177,12 @@ export const CreateBranchModal = () => {
 
   const { mutate: sendEvent } = useSendEventMutation()
 
-  const { mutateAsync: checkGithubBranchValidity, isLoading: isCheckingGHBranchValidity } =
+  const { mutateAsync: checkGithubBranchValidity, isPending: isCheckingGHBranchValidity } =
     useCheckGithubBranchValidity({
       onError: () => {},
     })
 
-  const { mutate: createBranch, isLoading: isCreatingBranch } = useBranchCreateMutation({
+  const { mutate: createBranch, isPending: isCreatingBranch } = useBranchCreateMutation({
     onSuccess: async (data) => {
       toast.success(`Successfully created preview branch "${data.name}"`)
       if (projectRef) {

apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx

@@ -69,12 +69,12 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
   })
 
   const { data: branches } = useBranchesQuery({ projectRef })
-  const { mutateAsync: checkGithubBranchValidity, isLoading: isChecking } =
+  const { mutateAsync: checkGithubBranchValidity, isPending: isChecking } =
     useCheckGithubBranchValidity({
       onError: () => {},
     })
 
-  const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
+  const { mutate: updateBranch, isPending: isUpdating } = useBranchUpdateMutation({
     onSuccess: (data) => {
       toast.success(`Successfully updated branch "${data.name}"`)
       onClose()

apps/studio/components/interfaces/BranchManagement/Overview.tsx

@@ -190,14 +190,14 @@ const PreviewBranchActions = ({
   ] = useState(false)
   const [showEditBranchModal, setShowEditBranchModal] = useState(false)
 
-  const { mutate: resetBranch, isLoading: isResetting } = useBranchResetMutation({
+  const { mutate: resetBranch, isPending: isResetting } = useBranchResetMutation({
     onSuccess() {
       toast.success('Success! Please allow a few seconds for the branch to reset.')
       setShowConfirmResetModal(false)
     },
   })
 
-  const { mutate: updateBranch, isLoading: isUpdatingBranch } = useBranchUpdateMutation({
+  const { mutate: updateBranch, isPending: isUpdatingBranch } = useBranchUpdateMutation({
     onSuccess() {
       toast.success('Successfully updated branch')
       setShowBranchModeSwitch(false)

apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx

@@ -24,7 +24,7 @@ export const ReviewRow = ({ branch }: ReviewRowProps) => {
   const queryClient = useQueryClient()
   const { project_ref: branchRef, parent_project_ref: projectRef } = branch
 
-  const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
+  const { mutate: updateBranch, isPending: isUpdating } = useBranchUpdateMutation({
     onSuccess: () => {
       toast.success('Branch marked as not ready for review')
       queryClient.invalidateQueries({

apps/studio/components/interfaces/Database/Backups/BackupItem.tsx

@@ -25,7 +25,7 @@ export const BackupItem = ({ index, isHealthy, backup, onSelectBackup }: BackupI
     'queue_job.restore.prepare'
   )
 
-  const { mutate: downloadBackup, isLoading: isDownloading } = useBackupDownloadMutation({
+  const { mutate: downloadBackup, isPending: isDownloading } = useBackupDownloadMutation({
     onSuccess: (res) => {
       const { fileUrl } = res
 

apps/studio/components/interfaces/Database/Backups/BackupsList.tsx

@@ -29,7 +29,7 @@ export const BackupsList = () => {
   const { data: backups } = useBackupsQuery({ projectRef })
   const {
     mutate: restoreFromBackup,
-    isLoading: isRestoring,
+    isPending: isRestoring,
     isSuccess: isSuccessBackup,
   } = useBackupRestoreMutation({
     onSuccess: () => {

apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx

@@ -45,7 +45,7 @@ export const PITRSelection = () => {
 
   const {
     mutate: restoreFromPitr,
-    isLoading: isRestoring,
+    isPending: isRestoring,
     isSuccess: isSuccessPITR,
   } = usePitrRestoreMutation({
     onSuccess: (_, variables) => {

apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx

@@ -74,7 +74,7 @@ export const CreateNewProjectDialog = ({
   )
   const hasPITREnabled = cloneBackups?.pitr_enabled
 
-  const { mutate: triggerClone, isLoading: cloneMutationLoading } = useProjectCloneMutation({
+  const { mutate: triggerClone, isPending: cloneMutationLoading } = useProjectCloneMutation({
     onError: (error) => {
       toast.error(`Failed to restore to new project: ${error.message}`)
     },

apps/studio/components/interfaces/Database/ETL/DestinationPanel/DestinationPanel.tsx

@@ -93,23 +93,23 @@ export const DestinationPanel = ({
   )
   const [isFormInteracting, setIsFormInteracting] = useState(false)
 
-  const { mutateAsync: createDestinationPipeline, isLoading: creatingDestinationPipeline } =
+  const { mutateAsync: createDestinationPipeline, isPending: creatingDestinationPipeline } =
     useCreateDestinationPipelineMutation({
       onSuccess: () => form.reset(defaultValues),
     })
 
-  const { mutateAsync: updateDestinationPipeline, isLoading: updatingDestinationPipeline } =
+  const { mutateAsync: updateDestinationPipeline, isPending: updatingDestinationPipeline } =
     useUpdateDestinationPipelineMutation({
       onSuccess: () => form.reset(defaultValues),
     })
 
-  const { mutateAsync: startPipeline, isLoading: startingPipeline } = useStartPipelineMutation()
+  const { mutateAsync: startPipeline, isPending: startingPipeline } = useStartPipelineMutation()
 
-  const { mutateAsync: createS3AccessKey, isLoading: isCreatingS3AccessKey } =
+  const { mutateAsync: createS3AccessKey, isPending: isCreatingS3AccessKey } =
     useS3AccessKeyCreateMutation()
 
-  const { mutateAsync: createNamespace, isLoading: isCreatingNamespace } =
-    useIcebergNamespaceCreateMutation({ projectRef })
+  const { mutateAsync: createNamespace, isPending: isCreatingNamespace } =
+    useIcebergNamespaceCreateMutation()
 
   const {
     data: publications = [],

apps/studio/components/interfaces/Database/ETL/EnableReplicationModal.tsx

@@ -20,7 +20,7 @@ export const EnableReplicationModal = () => {
   const { ref: projectRef } = useParams()
   const [open, setOpen] = useState(false)
 
-  const { mutate: createTenantSource, isLoading: creatingTenantSource } =
+  const { mutate: createTenantSource, isPending: creatingTenantSource } =
     useCreateTenantSourceMutation({
       onSuccess: () => {
         toast.success('ETL replication has been successfully enabled!')

apps/studio/components/interfaces/Database/ETL/NewPublicationPanel.tsx

@@ -34,7 +34,7 @@ interface NewPublicationPanelProps {
 
 export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicationPanelProps) => {
   const { ref: projectRef } = useParams()
-  const { mutateAsync: createPublication, isLoading: creatingPublication } =
+  const { mutateAsync: createPublication, isPending: creatingPublication } =
     useCreatePublicationMutation()
   const { data: tables } = useReplicationTablesQuery({
     projectRef,

apps/studio/components/interfaces/Database/ETL/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx

@@ -103,8 +103,8 @@ export const ReplicationPipelineStatus = () => {
   })
   const hasUpdate = Boolean(versionData?.new_version)
 
-  const { mutateAsync: startPipeline, isLoading: isStartingPipeline } = useStartPipelineMutation()
-  const { mutateAsync: stopPipeline, isLoading: isStoppingPipeline } = useStopPipelineMutation()
+  const { mutateAsync: startPipeline, isPending: isStartingPipeline } = useStartPipelineMutation()
+  const { mutateAsync: stopPipeline, isPending: isStoppingPipeline } = useStopPipelineMutation()
 
   const destinationName = pipeline?.destination_name
   const statusName = getStatusName(pipelineStatusData?.status)

apps/studio/components/interfaces/Database/ETL/RetryOptionsDropdown.tsx

@@ -37,7 +37,7 @@ export const RetryOptionsDropdown = ({ tableId, tableName }: RetryOptionsDropdow
   const { ref: projectRef, pipelineId: _pipelineId } = useParams()
   const [isOpen, setIsOpen] = useState(false)
 
-  const { mutate: rollbackTable, isLoading: isRollingBack } = useRollbackTableMutation({
+  const { mutate: rollbackTable, isPending: isRollingBack } = useRollbackTableMutation({
     onSuccess: (_, vars) => {
       const { projectRef, pipelineId } = vars
       toast.success(`Table "${tableName}" rolled back successfully and pipeline is being restarted`)
@@ -50,7 +50,7 @@ export const RetryOptionsDropdown = ({ tableId, tableName }: RetryOptionsDropdow
       )
     },
   })
-  const { mutate: startPipeline, isLoading: isRestartingPipeline } = useStartPipelineMutation({
+  const { mutate: startPipeline, isPending: isRestartingPipeline } = useStartPipelineMutation({
     onSuccess: () => {
       toast.success('Pipeline restarted successfully')
       setIsOpen(false)

apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx

@@ -42,7 +42,7 @@ const CreateEnumeratedTypeSidePanel = ({
   const initialValues = { name: '', description: '', values: [{ value: '' }] }
   const submitRef = useRef<HTMLButtonElement>(null)
   const { data: project } = useSelectedProjectQuery()
-  const { mutate: createEnumeratedType, isLoading: isCreating } = useEnumeratedTypeCreateMutation({
+  const { mutate: createEnumeratedType, isPending: isCreating } = useEnumeratedTypeCreateMutation({
     onSuccess: (res, vars) => {
       toast.success(`Successfully created type "${vars.name}"`)
       closePanel()

apps/studio/components/interfaces/Database/EnumeratedTypes/DeleteEnumeratedTypeModal.tsx

@@ -18,7 +18,7 @@ const DeleteEnumeratedTypeModal = ({
   onDelete,
 }: DeleteEnumeratedTypeModalProps) => {
   const { data: project } = useSelectedProjectQuery()
-  const { mutate: deleteEnumeratedType, isLoading: isDeleting } = useEnumeratedTypeDeleteMutation({
+  const { mutate: deleteEnumeratedType, isPending: isDeleting } = useEnumeratedTypeDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully deleted "${selectedEnumeratedType.name}"`)
       onClose()

apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx

@@ -41,7 +41,7 @@ const EditEnumeratedTypeSidePanel = ({
 }: EditEnumeratedTypeSidePanelProps) => {
   const submitRef = useRef<HTMLButtonElement>(null)
   const { data: project } = useSelectedProjectQuery()
-  const { mutate: updateEnumeratedType, isLoading: isCreating } = useEnumeratedTypeUpdateMutation({
+  const { mutate: updateEnumeratedType, isPending: isCreating } = useEnumeratedTypeUpdateMutation({
     onSuccess: (_, vars) => {
       toast.success(`Successfully updated type "${vars.name.updated}"`)
       onClose()

apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx

@@ -46,7 +46,7 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
     { enabled: visible }
   )
   const { data: protectedSchemas } = useProtectedSchemas({ excludeSchemas: ['extensions'] })
-  const { mutate: enableExtension, isLoading: isEnabling } = useDatabaseExtensionEnableMutation({
+  const { mutate: enableExtension, isPending: isEnabling } = useDatabaseExtensionEnableMutation({
     onSuccess: () => {
       toast.success(`Extension "${extension.name}" is now enabled`)
       onCancel()

apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx

@@ -41,7 +41,7 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
     ? `${DOCS_URL}${extensionMeta?.link}`
     : extensionMeta?.link ?? undefined
 
-  const { mutate: disableExtension, isLoading: isDisabling } = useDatabaseExtensionDisableMutation({
+  const { mutate: disableExtension, isPending: isDisabling } = useDatabaseExtensionDisableMutation({
     onSuccess: () => {
       toast.success(`${extension.name} is off.`)
       setIsDisableModalOpen(false)

apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx

@@ -92,9 +92,9 @@ export const CreateFunction = ({
     onClose,
   })
 
-  const { mutate: createDatabaseFunction, isLoading: isCreating } =
+  const { mutate: createDatabaseFunction, isPending: isCreating } =
     useDatabaseFunctionCreateMutation()
-  const { mutate: updateDatabaseFunction, isLoading: isUpdating } =
+  const { mutate: updateDatabaseFunction, isPending: isUpdating } =
     useDatabaseFunctionUpdateMutation()
 
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (data) => {

apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx

@@ -6,19 +6,24 @@ import { useRef } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
+import {
+  ReportsSelectFilter,
+  selectFilterSchema,
+} from 'components/interfaces/Reports/v2/ReportsSelectFilter'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query'
 import { useDatabaseFunctionDeleteMutation } from 'data/database-functions/database-functions-delete-mutation'
+import type { DatabaseFunction } from 'data/database-functions/database-functions-query'
+import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query'
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
 import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
 import { useIsProtectedSchema } from 'hooks/useProtectedSchemas'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
@@ -32,13 +37,8 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
-import {
-  ReportsSelectFilter,
-  selectFilterSchema,
-} from 'components/interfaces/Reports/v2/ReportsSelectFilter'
 import { ProtectedSchemaWarning } from '../../ProtectedSchemaWarning'
 import FunctionList from './FunctionList'
-import type { DatabaseFunction } from 'data/database-functions/database-functions-query'
 
 import { useIsInlineEditorEnabled } from 'components/interfaces/Account/Preferences/InlineEditorSettings'
 import { CreateFunction } from 'components/interfaces/Database/Functions/CreateFunction'
@@ -203,7 +203,7 @@ const FunctionsList = () => {
         handleErrorOnDelete(deletingFunctionIdRef, selectedId, `Function not found`),
     })
 
-  const { mutate: deleteDatabaseFunction, isLoading: isDeletingFunction } =
+  const { mutate: deleteDatabaseFunction, isPending: isDeletingFunction } =
     useDatabaseFunctionDeleteMutation({
       onSuccess: (_, variables) => {
         toast.success(`Successfully removed function ${variables.func.name}`)

apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx

@@ -21,7 +21,7 @@ const DeleteHookModal = ({
   const { name, schema } = selectedHook ?? {}
 
   const { data: project } = useSelectedProjectQuery()
-  const { mutate: deleteDatabaseTrigger, isLoading: isDeleting } = useDatabaseTriggerDeleteMutation(
+  const { mutate: deleteDatabaseTrigger, isPending: isDeleting } = useDatabaseTriggerDeleteMutation(
     {
       onSuccess: () => {
         toast.success(`Successfully deleted ${name}`)

apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx

@@ -78,7 +78,7 @@ const CreateIndexSidePanel = ({ visible, onClose }: CreateIndexSidePanelProps) =
     connectionString: project?.connectionString,
   })
 
-  const { mutate: createIndex, isLoading: isExecuting } = useDatabaseIndexCreateMutation({
+  const { mutate: createIndex, isPending: isExecuting } = useDatabaseIndexCreateMutation({
     onSuccess: () => {
       onClose()
       toast.success(`Successfully created index`)

apps/studio/components/interfaces/Database/Indexes/Indexes.tsx

@@ -18,15 +18,15 @@ import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQuer
 import { useIsProtectedSchema } from 'hooks/useProtectedSchemas'
 import {
   Button,
+  Card,
   Input,
   SidePanel,
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableRow,
   TableHeader,
-  Card,
+  TableRow,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning'
@@ -83,7 +83,7 @@ const Indexes = () => {
     connectionString: project?.connectionString,
   })
 
-  const { mutate: deleteIndex, isLoading: isExecuting } = useDatabaseIndexDeleteMutation({
+  const { mutate: deleteIndex, isPending: isExecuting } = useDatabaseIndexDeleteMutation({
     onSuccess: async () => {
       setSelectedIndexNameToDelete(null)
       toast.success('Successfully deleted index')

apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx

@@ -33,7 +33,7 @@ export const PublicationsTableItem = ({
     'publications'
   )
 
-  const { mutate: updatePublications, isLoading } = useDatabasePublicationUpdateMutation()
+  const { mutate: updatePublications, isPending } = useDatabasePublicationUpdateMutation()
 
   const toggleReplicationForTable = async (
     table: PostgresTable,
@@ -94,7 +94,7 @@ export const PublicationsTableItem = ({
               <TooltipTrigger>
                 <Switch
                   size="small"
-                  disabled={!canUpdatePublications || isLoading || isProtected}
+                  disabled={!canUpdatePublications || isPending || isProtected}
                   checked={checked}
                   onClick={() => toggleReplicationForTable(table, selectedPublication)}
                 />

apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx

@@ -53,7 +53,7 @@ export const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
     resolver: zodResolver(FormSchema),
   })
 
-  const { mutate: createDatabaseRole, isLoading: isCreating } = useDatabaseRoleCreateMutation({
+  const { mutate: createDatabaseRole, isPending: isCreating } = useDatabaseRoleCreateMutation({
     onSuccess: (_, vars) => {
       toast.success(`Successfully created new role: ${vars.payload.name}`)
       handleClose()

apps/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx

@@ -15,7 +15,7 @@ interface DeleteRoleModalProps {
 export const DeleteRoleModal = ({ role, visible, onClose, onDelete }: DeleteRoleModalProps) => {
   const { data: project } = useSelectedProjectQuery()
 
-  const { mutate: deleteDatabaseRole, isLoading: isDeleting } = useDatabaseRoleDeleteMutation({
+  const { mutate: deleteDatabaseRole, isPending: isDeleting } = useDatabaseRoleDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully deleted role: ${role.name}`)
       onClose()

apps/studio/components/interfaces/Database/Roles/RoleRow.tsx

@@ -31,7 +31,7 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
   const { data: project } = useSelectedProjectQuery()
   const [isExpanded, setIsExpanded] = useState(false)
 
-  const { mutate: updateDatabaseRole, isLoading: isUpdating } = useDatabaseRoleUpdateMutation()
+  const { mutate: updateDatabaseRole, isPending: isUpdating } = useDatabaseRoleUpdateMutation()
 
   const { isSuperuser, canLogin, canCreateRole, canCreateDb, isReplicationRole, canBypassRls } =
     role

apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx

@@ -92,7 +92,7 @@ export const TriggerSheet = ({
 
   const [showFunctionSelector, setShowFunctionSelector] = useState(false)
 
-  const { mutate: createDatabaseTrigger, isLoading: isCreating } = useDatabaseTriggerCreateMutation(
+  const { mutate: createDatabaseTrigger, isPending: isCreating } = useDatabaseTriggerCreateMutation(
     {
       onSuccess: () => {
         toast.success(`Successfully created trigger`)
@@ -103,7 +103,7 @@ export const TriggerSheet = ({
       },
     }
   )
-  const { mutate: updateDatabaseTrigger, isLoading: isUpdating } = useDatabaseTriggerUpdateMutation(
+  const { mutate: updateDatabaseTrigger, isPending: isUpdating } = useDatabaseTriggerUpdateMutation(
     {
       onSuccess: () => {
         toast.success(`Successfully updated trigger`)

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx

@@ -1,28 +1,29 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { DatabaseZap, FunctionSquare, Plus, Search, Shield } from 'lucide-react'
-import { useRef, useState } from 'react'
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
+import { useRef, useState } from 'react'
 import { toast } from 'sonner'
 
+import { useIsInlineEditorEnabled } from 'components/interfaces/Account/Preferences/InlineEditorSettings'
+import { ProtectedSchemaWarning } from 'components/interfaces/Database/ProtectedSchemaWarning'
+import { DeleteTrigger } from 'components/interfaces/Database/Triggers/DeleteTrigger'
+import { TriggerSheet } from 'components/interfaces/Database/Triggers/TriggerSheet'
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import SchemaSelector from 'components/ui/SchemaSelector'
-import { ProtectedSchemaWarning } from 'components/interfaces/Database/ProtectedSchemaWarning'
-import { DeleteTrigger } from 'components/interfaces/Database/Triggers/DeleteTrigger'
-import { TriggerSheet } from 'components/interfaces/Database/Triggers/TriggerSheet'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
+import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
 import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
 import { useIsProtectedSchema, useProtectedSchemas } from 'hooks/useProtectedSchemas'
-import { useIsInlineEditorEnabled } from 'components/interfaces/Account/Preferences/InlineEditorSettings'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
+import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import {
   AiIconAnimation,
@@ -35,7 +36,6 @@ import {
   TableRow,
 } from 'ui'
 import { TriggerList } from './TriggerList'
-import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { generateTriggerCreateSQL } from './TriggerList.utils'
 
 export const TriggersList = () => {
@@ -114,7 +114,7 @@ export const TriggersList = () => {
       handleErrorOnDelete(deletingTriggerIdRef, selectedId, `Database Trigger not found`),
   })
 
-  const { mutate: deleteDatabaseTrigger, isLoading: isDeletingTrigger } =
+  const { mutate: deleteDatabaseTrigger, isPending: isDeletingTrigger } =
     useDatabaseTriggerDeleteMutation({
       onSuccess: (_, variables) => {
         toast.success(`Successfully removed ${variables.trigger.name}`)

apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx

@@ -225,13 +225,13 @@ export function DiskManagementForm() {
   const isProjectRequestingDiskChanges = isRequestingChanges && !isProjectResizing
   const noPermissions = isPermissionsLoaded && !canUpdateDiskConfiguration
 
-  const { mutateAsync: updateDiskConfiguration, isLoading: isUpdatingDisk } =
+  const { mutateAsync: updateDiskConfiguration, isPending: isUpdatingDisk } =
     useUpdateDiskAttributesMutation({
       // this is to suppress to toast message
       onError: () => {},
       onSuccess: () => setRefetchInterval(2000),
     })
-  const { mutateAsync: updateSubscriptionAddon, isLoading: isUpdatingCompute } =
+  const { mutateAsync: updateSubscriptionAddon, isPending: isUpdatingCompute } =
     useProjectAddonUpdateMutation({
       // this is to suppress to toast message
       onError: () => {},
@@ -240,7 +240,7 @@ export function DiskManagementForm() {
         if (projectRef) setProjectStatus({ ref: projectRef, status: PROJECT_STATUS.RESIZING })
       },
     })
-  const { mutateAsync: updateDiskAutoscaleConfig, isLoading: isUpdatingDiskAutoscaleConfig } =
+  const { mutateAsync: updateDiskAutoscaleConfig, isPending: isUpdatingDiskAutoscaleConfig } =
     useUpdateDiskAutoscaleConfigMutation({
       // this is to suppress to toast message
       onError: () => {},

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx

@@ -104,8 +104,8 @@ export const EdgeFunctionDetails = () => {
     slug: functionSlug,
   })
 
-  const { mutate: updateEdgeFunction, isLoading: isUpdating } = useEdgeFunctionUpdateMutation()
-  const { mutate: deleteEdgeFunction, isLoading: isDeleting } = useEdgeFunctionDeleteMutation({
+  const { mutate: updateEdgeFunction, isPending: isUpdating } = useEdgeFunctionUpdateMutation()
+  const { mutate: deleteEdgeFunction, isPending: isDeleting } = useEdgeFunctionDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully deleted "${selectedFunction?.name}"`)
       router.push(`/project/${projectRef}/functions`)

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx

@@ -96,7 +96,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
   const { serviceKey } = getKeys(apiKeys)
 
   const { mutate: sendEvent } = useSendEventMutation()
-  const { mutate: testEdgeFunction, isLoading } = useEdgeFunctionTestMutation({
+  const { mutate: testEdgeFunction, isPending } = useEdgeFunctionTestMutation({
     onSuccess: (res) => setResponse(res),
     onError: (err) => {
       setError(err instanceof Error ? err.message : 'An unknown error occurred')
@@ -248,7 +248,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                     {...field}
                     size="tiny"
                     placeholder="Enter key..."
-                    disabled={isLoading}
+                    disabled={isPending}
                     className="h-auto py-2 font-mono rounded-none shadow-none bg-transparent border-l-0 border-r-1 border-t-0 border-b-0 border-border"
                   />
                 </FormControl_Shadcn_>
@@ -263,7 +263,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                     {...field}
                     size="tiny"
                     placeholder="Enter value..."
-                    disabled={isLoading}
+                    disabled={isPending}
                     className="h-auto py-2 font-mono rounded-none shadow-none bg-transparent border-none"
                   />
                 </FormControl_Shadcn_>
@@ -310,7 +310,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                           <Select
                             value={field.value}
                             onValueChange={field.onChange}
-                            disabled={isLoading}
+                            disabled={isPending}
                           >
                             <SelectTrigger className="w-full">
                               <SelectValue placeholder="Select method" />
@@ -338,7 +338,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                               {...field}
                               placeholder="Request body (JSON)"
                               rows={3}
-                              disabled={isLoading}
+                              disabled={isPending}
                               className="font-mono text-xs"
                             />
                           </FormControl_Shadcn_>
@@ -406,7 +406,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                         </Tabs>
                       )}
                     </div>
-                  ) : isLoading ? (
+                  ) : isPending ? (
                     <div className="h-full flex flex-col items-center justify-center gap-2">
                       <Loader2 size={24} className="text-foreground-muted animate-spin" />
                       <p className="text-sm text-foreground-light">Sending request...</p>
@@ -432,8 +432,8 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                 <Button
                   type="primary"
                   htmlType="submit"
-                  loading={isLoading}
-                  disabled={isLoading}
+                  loading={isPending}
+                  disabled={isPending}
                   onClick={() =>
                     sendEvent({
                       action: 'edge_function_test_send_button_clicked',

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx

@@ -5,11 +5,9 @@ import { toast } from 'sonner'
 import z from 'zod'
 
 import { useParams } from 'common'
-import Panel from 'components/ui/Panel'
 import { useSecretsCreateMutation } from 'data/secrets/secrets-create-mutation'
 import { useSecretsQuery } from 'data/secrets/secrets-query'
 import { Eye, EyeOff, MinusCircle } from 'lucide-react'
-import { DuplicateSecretWarningModal } from './DuplicateSecretWarningModal'
 import {
   Button,
   Card,
@@ -25,6 +23,7 @@ import {
   FormMessage_Shadcn_,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
+import { DuplicateSecretWarningModal } from './DuplicateSecretWarningModal'
 
 type SecretPair = {
   name: string
@@ -127,7 +126,7 @@ const AddNewSecretForm = () => {
     }
   }
 
-  const { mutate: createSecret, isLoading: isCreating } = useSecretsCreateMutation({
+  const { mutate: createSecret, isPending: isCreating } = useSecretsCreateMutation({
     onSuccess: (_, variables) => {
       toast.success(`Successfully created new secret "${variables.secrets[0].name}"`)
       // RHF recommends using setTimeout/useEffect to reset the form

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx

@@ -8,7 +8,7 @@ import AlertError from 'components/ui/AlertError'
 import NoPermission from 'components/ui/NoPermission'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useSecretsDeleteMutation } from 'data/secrets/secrets-delete-mutation'
-import { ProjectSecret, useSecretsQuery } from 'data/secrets/secrets-query'
+import { useSecretsQuery } from 'data/secrets/secrets-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
 import { Badge, Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
@@ -54,7 +54,7 @@ const EdgeFunctionSecrets = () => {
         handleErrorOnDelete(deletingSecretNameRef, selectedId, `Secret not found`),
     })
 
-  const { mutate: deleteSecret, isLoading: isDeleting } = useSecretsDeleteMutation({
+  const { mutate: deleteSecret, isPending: isDeleting } = useSecretsDeleteMutation({
     onSuccess: (_, variables) => {
       toast.success(`Successfully deleted ${variables.secrets[0]}`)
       setSelectedSecretToDelete(null)

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx

@@ -61,7 +61,7 @@ export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetPro
   const isValid = form.formState.isValid
 
   const { ref: projectRef } = useParams()
-  const { mutate: updateSecret, isLoading: isUpdating } = useSecretsCreateMutation({
+  const { mutate: updateSecret, isPending: isUpdating } = useSecretsCreateMutation({
     onSuccess: (_, variables) => {
       toast.success(`Successfully updated secret "${variables.secrets[0].name}"`)
       onClose()

apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx

@@ -108,7 +108,7 @@ export const CreateCronJobSheet = ({
   const pgNetExtensionInstalled = pgNetExtension?.installed_version != undefined
 
   const { mutate: sendEvent } = useSendEventMutation()
-  const { mutate: upsertCronJob, isLoading: isUpserting } = useDatabaseCronJobCreateMutation()
+  const { mutate: upsertCronJob, isPending: isUpserting } = useDatabaseCronJobCreateMutation()
   const isLoading = isLoadingGetCronJob || isUpserting
 
   const { can: canToggleExtensions } = useAsyncCheckPermissions(

apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx

@@ -48,7 +48,7 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
     { name: 'Every Monday at 2 AM', expression: '0 2 * * 1' },
   ] as const
 
-  const { mutate: generateCronSyntax, isLoading: isGeneratingCron } = useSqlCronGenerateMutation({
+  const { mutate: generateCronSyntax, isPending: isGeneratingCron } = useSqlCronGenerateMutation({
     onSuccess: (expression) => {
       form.setValue('schedule', expression, {
         shouldValidate: true,

apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx

@@ -103,13 +103,13 @@ export const CronJobTableCell = ({
           ? getNextRun(schedule, latest_run)
           : value
 
-  const { mutate: runCronJob, isLoading: isRunning } = useDatabaseCronJobRunCommandMutation({
+  const { mutate: runCronJob, isPending: isRunning } = useDatabaseCronJobRunCommandMutation({
     onSuccess: () => {
       toast.success(`Command from "${jobname}" ran successfully`)
     },
   })
 
-  const { mutate: toggleDatabaseCronJob, isLoading: isToggling } = useDatabaseCronJobToggleMutation(
+  const { mutate: toggleDatabaseCronJob, isPending: isToggling } = useDatabaseCronJobToggleMutation(
     {
       onSuccess: (_, vars) => {
         toast.success(`Successfully ${vars.active ? 'enabled' : 'disabled'} "${jobname}"`)

apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx

@@ -23,7 +23,7 @@ export const DeleteCronJob = ({ cronJob, visible, onClose, onDeleteStart }: Dele
   const [searchQuery] = useQueryState('search', parseAsString.withDefault(''))
 
   const { mutate: sendEvent } = useSendEventMutation()
-  const { mutate: deleteDatabaseCronJob, isLoading } = useDatabaseCronJobDeleteMutation({
+  const { mutate: deleteDatabaseCronJob, isPending } = useDatabaseCronJobDeleteMutation({
     onSuccess: () => {
       sendEvent({
         action: 'cron_job_deleted',
@@ -62,7 +62,7 @@ export const DeleteCronJob = ({ cronJob, visible, onClose, onDeleteStart }: Dele
         }}
         onConfirm={handleDelete}
         title={`Delete the cron job`}
-        loading={isLoading}
+        loading={isPending}
         confirmLabel={`Delete`}
         alert={{ title: 'You cannot recover this cron job once deleted.' }}
       />
@@ -79,7 +79,7 @@ export const DeleteCronJob = ({ cronJob, visible, onClose, onDeleteStart }: Dele
         cleanPointerEventsNoneOnBody()
       }}
       title="Delete this cron job"
-      loading={isLoading}
+      loading={isPending}
       confirmLabel={`Delete cron job ${cronJob.jobname}`}
       confirmPlaceholder="Type in name of cron job"
       confirmString={cronJob.jobname ?? 'Unknown'}

apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet.tsx

@@ -79,7 +79,7 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) =>
     connectionString: project?.connectionString,
   })
 
-  const { mutate: createQueue, isLoading } = useDatabaseQueueCreateMutation()
+  const { mutate: createQueue, isPending } = useDatabaseQueueCreateMutation()
 
   const form = useForm<CreateQueueForm>({
     resolver: zodResolver(FormSchema),
@@ -313,18 +313,11 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) =>
               type="default"
               htmlType="button"
               onClick={confirmOnClose}
-              disabled={isLoading}
+              disabled={isPending}
             >
               Cancel
             </Button>
-            <Button
-              size="tiny"
-              type="primary"
-              form={FORM_ID}
-              htmlType="submit"
-              disabled={isLoading}
-              loading={isLoading}
-            >
+            <Button size="tiny" type="primary" form={FORM_ID} htmlType="submit" loading={isPending}>
               Create queue
             </Button>
           </SheetFooter>

apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx

@@ -78,7 +78,7 @@ export const QueueTab = () => {
   )
   const messages = useMemo(() => data?.pages.flatMap((p) => p), [data?.pages])
 
-  const { mutate: updateTable, isLoading: isUpdatingTable } = useTableUpdateMutation({
+  const { mutate: updateTable, isPending: isUpdatingTable } = useTableUpdateMutation({
     onSettled: () => {
       toast.success(`Successfully enabled RLS for ${queueName}`)
       setRlsConfirmModalOpen(false)

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx

@@ -15,7 +15,7 @@ export const DeleteQueue = ({ queueName, visible, onClose }: DeleteQueueProps) =
   const router = useRouter()
   const { data: project } = useSelectedProjectQuery()
 
-  const { mutate: deleteDatabaseQueue, isLoading } = useDatabaseQueueDeleteMutation({
+  const { mutate: deleteDatabaseQueue, isPending } = useDatabaseQueueDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully removed queue ${queueName}`)
       router.push(`/project/${project?.ref}/integrations/queues/queues`)
@@ -44,7 +44,7 @@ export const DeleteQueue = ({ queueName, visible, onClose }: DeleteQueueProps) =
       onCancel={() => onClose()}
       onConfirm={handleDelete}
       title="Delete this queue"
-      loading={isLoading}
+      loading={isPending}
       confirmLabel={`Delete queue ${queueName}`}
       confirmPlaceholder="Type in name of queue"
       confirmString={queueName ?? 'Unknown'}

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx

@@ -54,19 +54,19 @@ export const MessageDetailsPanel = ({
 
   const {
     mutate: archiveMessage,
-    isLoading: isLoadingArchive,
+    isPending: isLoadingArchive,
     isSuccess: isSuccessArchive,
   } = useDatabaseQueueMessageArchiveMutation()
 
   const {
     mutate: readMessage,
-    isLoading: isLoadingRead,
+    isPending: isLoadingRead,
     isSuccess: isSuccessRead,
   } = useDatabaseQueueMessageReadMutation()
 
   const {
     mutate: deleteMessage,
-    isLoading: isLoadingDelete,
+    isPending: isLoadingDelete,
     isSuccess: isSuccessDelete,
   } = useDatabaseQueueMessageDeleteMutation()
 

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx

@@ -13,7 +13,7 @@ interface PurgeQueueProps {
 export const PurgeQueue = ({ queueName, visible, onClose }: PurgeQueueProps) => {
   const { data: project } = useSelectedProjectQuery()
 
-  const { mutate: purgeDatabaseQueue, isLoading } = useDatabaseQueuePurgeMutation({
+  const { mutate: purgeDatabaseQueue, isPending } = useDatabaseQueuePurgeMutation({
     onSuccess: () => {
       toast.success(`Successfully purged queue ${queueName}`)
       onClose()
@@ -41,7 +41,7 @@ export const PurgeQueue = ({ queueName, visible, onClose }: PurgeQueueProps) =>
       onCancel={() => onClose()}
       onConfirm={handlePurge}
       title="Purge this queue"
-      loading={isLoading}
+      loading={isPending}
       confirmLabel={`Purge queue ${queueName}`}
       confirmPlaceholder="Type in name of queue"
       confirmString={queueName ?? 'Unknown'}

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx

@@ -47,7 +47,7 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) =>
     },
   })
 
-  const { isLoading, mutate } = useDatabaseQueueMessageSendMutation({
+  const { isPending, mutate } = useDatabaseQueueMessageSendMutation({
     onSuccess: () => {
       toast.success(`Successfully added a message to the queue.`)
       onClose()
@@ -76,7 +76,7 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) =>
       alignFooter="right"
       header="Add a message to the queue"
       visible={visible}
-      loading={isLoading}
+      loading={isPending}
       onCancel={onClose}
       confirmText="Add"
       onConfirm={() => {

apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx

@@ -13,7 +13,7 @@ interface DeleteSecretModalProps {
 
 const DeleteSecretModal = ({ selectedSecret, onClose, onDeleteStart }: DeleteSecretModalProps) => {
   const { data: project } = useSelectedProjectQuery()
-  const { mutate: deleteSecret, isLoading: isDeleting } = useVaultSecretDeleteMutation({
+  const { mutate: deleteSecret, isPending: isDeleting } = useVaultSecretDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully deleted secret ${selectedSecret?.name}`)
       onClose()

apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx

@@ -1,10 +1,15 @@
-import { useState } from 'react'
-import { EyeOff, Eye } from 'lucide-react'
-import { type SubmitHandler, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
+import { Eye, EyeOff } from 'lucide-react'
+import { useState } from 'react'
+import { type SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
+import { z } from 'zod'
 
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useVaultSecretDecryptedValueQuery } from 'data/vault/vault-secret-decrypted-value-query'
+import { useVaultSecretUpdateMutation } from 'data/vault/vault-secret-update-mutation'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import type { VaultSecret } from 'types'
 import {
   Button,
   Dialog,
@@ -20,11 +25,6 @@ import {
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { useVaultSecretDecryptedValueQuery } from 'data/vault/vault-secret-decrypted-value-query'
-import { useVaultSecretUpdateMutation } from 'data/vault/vault-secret-update-mutation'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import type { VaultSecret } from 'types'
 
 interface EditSecretModalProps {
   visible: boolean
@@ -62,7 +62,7 @@ const EditSecretModal = ({ visible, secret, onClose }: EditSecretModalProps) =>
     values,
   })
 
-  const { mutate: updateSecret, isLoading: isSubmitting } = useVaultSecretUpdateMutation()
+  const { mutate: updateSecret, isPending: isSubmitting } = useVaultSecretUpdateMutation()
 
   const onSubmit: SubmitHandler<z.infer<typeof SecretSchema>> = async (values) => {
     if (!project) return console.error('Project is required')

apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx

@@ -57,7 +57,7 @@ export const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationCo
       setIsOpen(false)
     }, [])
 
-    const { mutate: syncEnvs, isLoading: isSyncEnvLoading } =
+    const { mutate: syncEnvs, isPending: isSyncEnvLoading } =
       useIntegrationsVercelConnectionSyncEnvsMutation({
         onSuccess: () => {
           toast.success('Successfully synced environment variables')

apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx

@@ -31,7 +31,7 @@ export const WebhooksOverviewTab = () => {
     'triggers'
   )
 
-  const { mutate: enableHooks, isLoading: isEnablingHooks } = useHooksEnableMutation({
+  const { mutate: enableHooks, isPending: isEnablingHooks } = useHooksEnableMutation({
     onSuccess: async () => {
       await refetch()
       toast.success('Successfully enabled webhooks')

apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx

@@ -69,7 +69,7 @@ export const CreateIcebergWrapperSheet = ({
 
   const [formErrors, setFormErrors] = useState<{ [k: string]: string }>({})
 
-  const { mutateAsync: createFDW, isLoading: isCreatingWrapper } = useFDWCreateMutation({
+  const { mutateAsync: createFDW, isPending: isCreatingWrapper } = useFDWCreateMutation({
     onSuccess: () => {
       toast.success(`Successfully created ${wrapperMeta?.label} foreign data wrapper`)
       onClose()
@@ -111,7 +111,7 @@ export const CreateIcebergWrapperSheet = ({
     ),
   }
 
-  const { mutateAsync: createSchema, isLoading: isCreatingSchema } = useSchemaCreateMutation()
+  const { mutateAsync: createSchema, isPending: isCreatingSchema } = useSchemaCreateMutation()
 
   const onSubmit = async (values: any) => {
     const validate = makeValidateRequired(wrapperMeta.server.options)

apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx

@@ -70,7 +70,7 @@ export const CreateWrapperSheet = ({
 
   const [formErrors, setFormErrors] = useState<{ [k: string]: string }>({})
 
-  const { mutateAsync: createFDW, isLoading: isCreatingWrapper } = useFDWCreateMutation({
+  const { mutateAsync: createFDW, isPending: isCreatingWrapper } = useFDWCreateMutation({
     onSuccess: () => {
       toast.success(`Successfully created ${wrapperMeta?.label} foreign data wrapper`)
       setNewTables([])
@@ -97,7 +97,7 @@ export const CreateWrapperSheet = ({
     ),
   }
 
-  const { mutateAsync: createSchema, isLoading: isCreatingSchema } = useSchemaCreateMutation()
+  const { mutateAsync: createSchema, isPending: isCreatingSchema } = useSchemaCreateMutation()
 
   const onUpdateTable = (values: any) => {
     setNewTables((prev) => {

apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx

@@ -19,7 +19,7 @@ const DeleteWrapperModal = ({
   deletingWrapperIdRef,
 }: DeleteWrapperModalProps) => {
   const { data: project } = useSelectedProjectQuery()
-  const { mutate: deleteFDW, isLoading: isDeleting } = useFDWDeleteMutation({
+  const { mutate: deleteFDW, isPending: isDeleting } = useFDWDeleteMutation({
     onSuccess: () => {
       toast.success(`Successfully disabled ${selectedWrapper?.name} foreign data wrapper`)
       onClose()

apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx

@@ -49,7 +49,7 @@ export const EditWrapperSheet = ({
     connectionString: project?.connectionString,
   })
 
-  const { mutate: updateFDW, isLoading: isSaving } = useFDWUpdateMutation({
+  const { mutate: updateFDW, isPending: isSaving } = useFDWUpdateMutation({
     onSuccess: () => {
       toast.success(`Successfully updated ${wrapperMeta?.label} foreign data wrapper`)
       setWrapperTables([])

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/create-key-dialog.tsx

@@ -101,7 +101,7 @@ export const CreateKeyDialog = ({
     return null
   }, [privateKey, newKeyAlgorithm])
 
-  const { mutate, isLoading: isLoadingMutation } = useJWTSigningKeyCreateMutation({
+  const { mutate, isPending: isPendingMutation } = useJWTSigningKeyCreateMutation({
     onSuccess: () => {
       toast.success('Standby key created successfully')
       onClose()
@@ -234,8 +234,8 @@ export const CreateKeyDialog = ({
       <DialogFooter>
         <Button
           onClick={() => handleAddNewStandbyKey()}
-          disabled={isLoadingMutation || !!privateKeyMessage}
-          loading={isLoadingMutation}
+          disabled={isPendingMutation || !!privateKeyMessage}
+          loading={isPendingMutation}
         >
           Create standby key
         </Button>

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx

@@ -74,7 +74,7 @@ export const JWTSecretKeysTable = () => {
   const { data: legacyAPIKeysStatus, isLoading: isLoadingLegacyAPIKeysStatus } =
     useLegacyAPIKeysStatusQuery({ projectRef }, { enabled: canReadAPIKeys })
 
-  const { mutate: migrateJWTSecret, isLoading: isMigrating } = useLegacyJWTSigningKeyCreateMutation(
+  const { mutate: migrateJWTSecret, isPending: isMigrating } = useLegacyJWTSigningKeyCreateMutation(
     {
       onSuccess: () => {
         setShownDialog(undefined)
@@ -83,17 +83,17 @@ export const JWTSecretKeysTable = () => {
     }
   )
 
-  const { mutate: updateJWTSigningKey, isLoading: isUpdatingJWTSigningKey } =
+  const { mutate: updateJWTSigningKey, isPending: isUpdatingJWTSigningKey } =
     useJWTSigningKeyUpdateMutation({
       onSuccess: () => {
         resetDialog()
         setSelectedKeyToUpdate(undefined)
       },
     })
-  const { mutate: deleteJWTSigningKey, isLoading: isDeletingJWTSigningKey } =
+  const { mutate: deleteJWTSigningKey, isPending: isDeletingJWTSigningKey } =
     useJWTSigningKeyDeleteMutation({ onSuccess: () => resetDialog(), onError: () => resetDialog() })
 
-  const isLoadingMutation = isUpdatingJWTSigningKey || isDeletingJWTSigningKey || isMigrating
+  const isPendingMutation = isUpdatingJWTSigningKey || isDeletingJWTSigningKey || isMigrating
   const isLoading =
     isProjectLoading || isLoadingSigningKeys || isLoadingLegacyKey || isLoadingLegacyAPIKeysStatus
 
@@ -205,7 +205,7 @@ export const JWTSecretKeysTable = () => {
                 description="Set up a new key which you can switch to once it has been picked up by all components of your application."
                 buttonLabel="Create Standby Key"
                 onClick={() => setShownDialog('create')}
-                loading={isLoadingMutation}
+                loading={isPendingMutation}
                 type="primary"
                 icon={<Timer className="size-4" />}
               />
@@ -498,7 +498,7 @@ export const JWTSecretKeysTable = () => {
         (legacyKey?.id !== selectedKey.id || !(legacyAPIKeysStatus?.enabled ?? false)) && (
           <TextConfirmModal
             visible={shownDialog === 'revoke'}
-            loading={isLoadingMutation}
+            loading={isPendingMutation}
             onConfirm={() => handleRevokeKey(selectedKey.id)}
             onCancel={resetDialog}
             title={`Revoke ${selectedKey.id}`}
@@ -538,7 +538,7 @@ export const JWTSecretKeysTable = () => {
       {selectedKey && selectedKey.status === 'revoked' && (
         <TextConfirmModal
           visible={shownDialog === 'delete'}
-          loading={isLoadingMutation}
+          loading={isPendingMutation}
           onConfirm={() => handleDeleteKey(selectedKey.id)}
           onCancel={resetDialog}
           title={`Permanently delete ${selectedKey.id}`}