chore: update dependencies in pnpm-lock.yaml and package.json, including zod to version 4.3.6, @dokploy/trpc-openapi to version 0.0.13, and @trpc packages to version 11.10.0; refactor loading state handling in application components

apps/api/package.json

@@ -20,7 +20,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"redis": "4.7.0",
-		"zod": "^3.25.76"
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@types/node": "^24.4.0",

apps/dokploy/components/dashboard/application/advanced/cluster/show-cluster-settings.tsx

@@ -73,7 +73,7 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 		mongo: () => api.mongo.update.useMutation(),
 	};
 
-	const { mutateAsync, isLoading } = mutationMap[type]
+	const { mutateAsync, isPending } = mutationMap[type]
 		? mutationMap[type]()
 		: api.mongo.update.useMutation();
 
@@ -236,7 +236,7 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 						)}
 
 						<div className="flex justify-end">
-							<Button isLoading={isLoading} type="submit" className="w-fit">
+							<Button isLoading={isPending} type="submit" className="w-fit">
 								Save
 							</Button>
 						</div>

apps/dokploy/components/dashboard/application/advanced/general/add-command.tsx

@@ -50,7 +50,7 @@ export const AddCommand = ({ applicationId }: Props) => {
 
 	const utils = api.useUtils();
 
-	const { mutateAsync, isLoading } = api.application.update.useMutation();
+	const { mutateAsync, isPending } = api.application.update.useMutation();
 
 	const form = useForm<AddCommand>({
 		defaultValues: {
@@ -177,7 +177,7 @@ export const AddCommand = ({ applicationId }: Props) => {
 							</div>
 						</div>
 						<div className="flex justify-end">
-							<Button isLoading={isLoading} type="submit" className="w-fit">
+							<Button isLoading={isPending} type="submit" className="w-fit">
 								Save
 							</Button>
 						</div>

apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx

@@ -69,11 +69,11 @@ export const ShowImport = ({ composeId }: Props) => {
 	} | null>(null);
 
 	const utils = api.useUtils();
-	const { mutateAsync: processTemplate, isLoading: isLoadingTemplate } =
+	const { mutateAsync: processTemplate, isPending: isLoadingTemplate } =
 		api.compose.processTemplate.useMutation();
 	const {
 		mutateAsync: importTemplate,
-		isLoading: isImporting,
+		isPending: isImporting,
 		isSuccess: isImportSuccess,
 	} = api.compose.import.useMutation();
 

apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx

@@ -64,7 +64,7 @@ export const HandlePorts = ({
 			enabled: !!portId,
 		},
 	);
-	const { mutateAsync, isLoading, error, isError } = portId
+	const { mutateAsync, isPending, error, isError } = portId
 		? api.port.update.useMutation()
 		: api.port.create.useMutation();
 
@@ -266,7 +266,7 @@ export const HandlePorts = ({
 
 					<DialogFooter>
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							form="hook-form-add-port"
 							type="submit"
 						>

apps/dokploy/components/dashboard/application/advanced/ports/show-port.tsx

@@ -25,7 +25,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync: deletePort, isLoading: isRemoving } =
+	const { mutateAsync: deletePort, isPending: isRemoving } =
 		api.port.delete.useMutation();
 
 	return (

apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx

@@ -100,7 +100,7 @@ export const HandleRedirect = ({
 
 	const utils = api.useUtils();
 
-	const { mutateAsync, isLoading, error, isError } = redirectId
+	const { mutateAsync, isPending, error, isError } = redirectId
 		? api.redirects.update.useMutation()
 		: api.redirects.create.useMutation();
 
@@ -268,7 +268,7 @@ export const HandleRedirect = ({
 
 					<DialogFooter>
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							form="hook-form-add-redirect"
 							type="submit"
 						>

apps/dokploy/components/dashboard/application/advanced/redirects/show-redirects.tsx

@@ -24,7 +24,7 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync: deleteRedirect, isLoading: isRemoving } =
+	const { mutateAsync: deleteRedirect, isPending: isRemoving } =
 		api.redirects.delete.useMutation();
 
 	const utils = api.useUtils();

apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx

@@ -55,7 +55,7 @@ export const HandleSecurity = ({
 		},
 	);
 
-	const { mutateAsync, isLoading, error, isError } = securityId
+	const { mutateAsync, isPending, error, isError } = securityId
 		? api.security.update.useMutation()
 		: api.security.create.useMutation();
 
@@ -163,7 +163,7 @@ export const HandleSecurity = ({
 
 					<DialogFooter>
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							form="hook-form-add-security"
 							type="submit"
 						>

apps/dokploy/components/dashboard/application/advanced/security/show-security.tsx

@@ -27,7 +27,7 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync: deleteSecurity, isLoading: isRemoving } =
+	const { mutateAsync: deleteSecurity, isPending: isRemoving } =
 		api.security.delete.useMutation();
 
 	const utils = api.useUtils();

apps/dokploy/components/dashboard/application/advanced/show-build-server.tsx

@@ -74,7 +74,7 @@ export const ShowBuildServer = ({ applicationId }: Props) => {
 	const { data: buildServers } = api.server.buildServers.useQuery();
 	const { data: registries } = api.registry.all.useQuery();
 
-	const { mutateAsync, isLoading } = api.application.update.useMutation();
+	const { mutateAsync, isPending } = api.application.update.useMutation();
 
 	const form = useForm<Schema>({
 		defaultValues: {
@@ -274,7 +274,7 @@ export const ShowBuildServer = ({ applicationId }: Props) => {
 						/>
 
 						<div className="flex w-full justify-end">
-							<Button isLoading={isLoading} type="submit">
+							<Button isLoading={isPending} type="submit">
 								Save
 							</Button>
 						</div>

apps/dokploy/components/dashboard/application/advanced/show-resources.tsx

@@ -128,7 +128,7 @@ export const ShowResources = ({ id, type }: Props) => {
 		mongo: () => api.mongo.update.useMutation(),
 	};
 
-	const { mutateAsync, isLoading } = mutationMap[type]
+	const { mutateAsync, isPending } = mutationMap[type]
 		? mutationMap[type]()
 		: api.mongo.update.useMutation();
 
@@ -517,7 +517,7 @@ export const ShowResources = ({ id, type }: Props) => {
 						</div>
 
 						<div className="flex w-full justify-end">
-							<Button isLoading={isLoading} type="submit">
+							<Button isLoading={isPending} type="submit">
 								Save
 							</Button>
 						</div>

apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx

@@ -15,7 +15,7 @@ interface Props {
 }
 
 export const ShowTraefikConfig = ({ applicationId }: Props) => {
-	const { data, isLoading } = api.application.readTraefikConfig.useQuery(
+	const { data, isPending } = api.application.readTraefikConfig.useQuery(
 		{
 			applicationId,
 		},
@@ -35,7 +35,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 				</div>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
-				{isLoading ? (
+				{isPending ? (
 					<span className="text-base text-muted-foreground flex flex-row gap-3 items-center justify-center min-h-[10vh]">
 						Loading...
 						<Loader2 className="animate-spin" />

apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -69,7 +69,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.application.updateTraefikConfig.useMutation();
 
 	const form = useForm<UpdateTraefikConfig>({
@@ -126,7 +126,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			}}
 		>
 			<DialogTrigger asChild>
-				<Button isLoading={isLoading}>Modify</Button>
+				<Button isLoading={isPending}>Modify</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
@@ -198,7 +198,7 @@ routers:
 							</p>
 						</div>
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							form="hook-form-update-traefik-config"
 							type="submit"
 						>

apps/dokploy/components/dashboard/application/advanced/volumes/show-volumes.tsx

@@ -37,7 +37,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
-	const { mutateAsync: deleteVolume, isLoading: isRemoving } =
+	const { mutateAsync: deleteVolume, isPending: isRemoving } =
 		api.mounts.remove.useMutation();
 	return (
 		<Card className="bg-background">

apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx

@@ -93,7 +93,7 @@ export const UpdateVolume = ({
 		},
 	);
 
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.mounts.update.useMutation();
 
 	const form = useForm<UpdateMount>({
@@ -187,7 +187,7 @@ export const UpdateVolume = ({
 					variant="ghost"
 					size="icon"
 					className="group hover:bg-blue-500/10 "
-					isLoading={isLoading}
+					isLoading={isPending}
 				>
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
@@ -310,7 +310,7 @@ PORT=3000
 						</div>
 						<DialogFooter>
 							<Button
-								isLoading={isLoading}
+								isLoading={isPending}
 								// form="hook-form-update-volume"
 								type="submit"
 							>

apps/dokploy/components/dashboard/application/build/show.tsx

@@ -163,7 +163,7 @@ const resetData = (data: ApplicationData): AddTemplate => {
 };
 
 export const ShowBuildChooseForm = ({ applicationId }: Props) => {
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		api.application.saveBuildType.useMutation();
 	const { data, refetch } = api.application.one.useQuery(
 		{ applicationId },
@@ -528,7 +528,7 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 							</>
 						)}
 						<div className="flex w-full justify-end">
-							<Button isLoading={isLoading} type="submit">
+							<Button isLoading={isPending} type="submit">
 								Save
 							</Button>
 						</div>

apps/dokploy/components/dashboard/application/deployments/cancel-queues.tsx

@@ -20,7 +20,7 @@ interface Props {
 }
 
 export const CancelQueues = ({ id, type }: Props) => {
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		type === "application"
 			? api.application.cleanQueues.useMutation()
 			: api.compose.cleanQueues.useMutation();
@@ -33,7 +33,7 @@ export const CancelQueues = ({ id, type }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="destructive" className="w-fit" isLoading={isLoading}>
+				<Button variant="destructive" className="w-fit" isLoading={isPending}>
 					Cancel Queues
 					<Ban className="size-4" />
 				</Button>

apps/dokploy/components/dashboard/application/deployments/clear-deployments.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 export const ClearDeployments = ({ id, type }: Props) => {
 	const utils = api.useUtils();
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		type === "application"
 			? api.application.clearDeployments.useMutation()
 			: api.compose.clearDeployments.useMutation();
@@ -29,7 +29,7 @@ export const ClearDeployments = ({ id, type }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="outline" className="w-fit" isLoading={isLoading}>
+				<Button variant="outline" className="w-fit" isLoading={isPending}>
 					Clear deployments
 					<Paintbrush className="size-4" />
 				</Button>

apps/dokploy/components/dashboard/application/deployments/kill-build.tsx

@@ -20,7 +20,7 @@ interface Props {
 }
 
 export const KillBuild = ({ id, type }: Props) => {
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		type === "application"
 			? api.application.killBuild.useMutation()
 			: api.compose.killBuild.useMutation();
@@ -28,7 +28,7 @@ export const KillBuild = ({ id, type }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="outline" className="w-fit" isLoading={isLoading}>
+				<Button variant="outline" className="w-fit" isLoading={isPending}>
 					Kill Build
 					<Scissors className="size-4" />
 				</Button>

apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx

@@ -61,7 +61,7 @@ export const ShowDeployments = ({
 	const [activeLog, setActiveLog] = useState<
 		RouterOutputs["deployment"]["all"][number] | null
 	>(null);
-	const { data: deployments, isLoading: isLoadingDeployments } =
+	const { data: deployments, isPending: isLoadingDeployments } =
 		api.deployment.allByType.useQuery(
 			{
 				id,
@@ -75,21 +75,21 @@ export const ShowDeployments = ({
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
-	const { mutateAsync: rollback, isLoading: isRollingBack } =
+	const { mutateAsync: rollback, isPending: isRollingBack } =
 		api.rollback.rollback.useMutation();
-	const { mutateAsync: killProcess, isLoading: isKillingProcess } =
+	const { mutateAsync: killProcess, isPending: isKillingProcess } =
 		api.deployment.killProcess.useMutation();
-	const { mutateAsync: removeDeployment, isLoading: isRemovingDeployment } =
+	const { mutateAsync: removeDeployment, isPending: isRemovingDeployment } =
 		api.deployment.removeDeployment.useMutation();
 
 	// Cancel deployment mutations
 	const {
 		mutateAsync: cancelApplicationDeployment,
-		isLoading: isCancellingApp,
+		isPending: isCancellingApp,
 	} = api.application.cancelDeployment.useMutation();
 	const {
 		mutateAsync: cancelComposeDeployment,
-		isLoading: isCancellingCompose,
+		isPending: isCancellingCompose,
 	} = api.compose.cancelDeployment.useMutation();
 
 	const [url, setUrl] = React.useState("");

apps/dokploy/components/dashboard/application/domains/handle-domain.tsx

@@ -159,11 +159,11 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 					},
 				);
 
-	const { mutateAsync, isError, error, isLoading } = domainId
+	const { mutateAsync, isError, error, isPending } = domainId
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
 
-	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+	const { mutateAsync: generateDomain, isPending: isLoadingGenerate } =
 		api.domain.generateDomain.useMutation();
 
 	const { data: canGenerateTraefikMeDomains } =
@@ -240,7 +240,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 				domainType: type,
 			});
 		}
-	}, [form, data, isLoading, domainId]);
+	}, [form, data, isPending, domainId]);
 
 	// Separate effect for handling custom cert resolver validation
 	useEffect(() => {
@@ -730,7 +730,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 					</form>
 
 					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
+						<Button isLoading={isPending} form="hook-form" type="submit">
 							{dictionary.submit}
 						</Button>
 					</DialogFooter>

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -97,7 +97,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 
 	const { mutateAsync: validateDomain } =
 		api.domain.validateDomain.useMutation();
-	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
+	const { mutateAsync: deleteDomain, isPending: isRemoving } =
 		api.domain.delete.useMutation();
 
 	const handleValidateDomain = async (host: string) => {

apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx

@@ -60,7 +60,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		mongo: () => api.mongo.update.useMutation(),
 		compose: () => api.compose.update.useMutation(),
 	};
-	const { mutateAsync, isLoading } = mutationMap[type]
+	const { mutateAsync, isPending } = mutationMap[type]
 		? mutationMap[type]()
 		: api.mongo.update.useMutation();
 
@@ -111,7 +111,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
+			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}
@@ -121,7 +121,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [form, onSubmit, isLoading]);
+	}, [form, onSubmit, isPending]);
 
 	return (
 		<div className="flex w-full flex-col gap-5 ">
@@ -196,7 +196,7 @@ PORT=3000
 									</Button>
 								)}
 								<Button
-									isLoading={isLoading}
+									isLoading={isPending}
 									className="w-fit"
 									type="submit"
 									disabled={!hasChanges}

apps/dokploy/components/dashboard/application/environment/show.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 export const ShowEnvironment = ({ applicationId }: Props) => {
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		api.application.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.application.one.useQuery(
@@ -104,7 +104,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
+			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}
@@ -114,7 +114,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [form, onSubmit, isLoading]);
+	}, [form, onSubmit, isPending]);
 
 	return (
 		<Card className="bg-background px-6 pb-6">
@@ -214,7 +214,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							</Button>
 						)}
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							className="w-fit"
 							type="submit"
 							disabled={!hasChanges}

apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx

@@ -74,7 +74,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 		api.bitbucket.bitbucketProviders.useQuery();
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync, isLoading: isSavingBitbucketProvider } =
+	const { mutateAsync, isPending: isSavingBitbucketProvider } =
 		api.application.saveBitbucketProvider.useMutation();
 
 	const form = useForm({
@@ -333,7 +333,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -350,7 +350,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/application/general/generic/save-drag-n-drop.tsx

@@ -24,7 +24,7 @@ interface Props {
 export const SaveDragNDrop = ({ applicationId }: Props) => {
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		api.application.dropDeployment.useMutation();
 
 	const form = useForm({
@@ -129,8 +129,8 @@ export const SaveDragNDrop = ({ applicationId }: Props) => {
 					<Button
 						type="submit"
 						className="w-fit"
-						isLoading={isLoading}
-						disabled={!zip || isLoading}
+						isLoading={isPending}
+						disabled={!zip || isPending}
 					>
 						Deploy{" "}
 					</Button>

apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx

@@ -58,7 +58,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 	const { data: sshKeys } = api.sshKey.all.useQuery();
 	const router = useRouter();
 
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		api.application.saveGitProvider.useMutation();
 
 	const form = useForm({
@@ -317,7 +317,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				</div>
 
 				<div className="flex flex-row justify-end">
-					<Button type="submit" className="w-fit" isLoading={isLoading}>
+					<Button type="submit" className="w-fit" isLoading={isPending}>
 						Save
 					</Button>
 				</div>

apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx

@@ -88,7 +88,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync, isLoading: isSavingGiteaProvider } =
+	const { mutateAsync, isPending: isSavingGiteaProvider } =
 		api.application.saveGiteaProvider.useMutation();
 
 	const form = useForm({
@@ -353,7 +353,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -371,7 +371,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -72,7 +72,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 	const { data: githubProviders } = api.github.githubProviders.useQuery();
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync, isLoading: isSavingGithubProvider } =
+	const { mutateAsync, isPending: isSavingGithubProvider } =
 		api.application.saveGithubProvider.useMutation();
 
 	const form = useForm({
@@ -94,7 +94,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 	const githubId = form.watch("githubId");
 	const triggerType = form.watch("triggerType");
 
-	const { data: repositories, isLoading: isLoadingRepositories } =
+	const { data: repositories, isPending: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
 				githubId,
@@ -320,7 +320,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -337,7 +337,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -74,7 +74,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync, isLoading: isSavingGitlabProvider } =
+	const { mutateAsync, isPending: isSavingGitlabProvider } =
 		api.application.saveGitlabProvider.useMutation();
 
 	const form = useForm({
@@ -351,7 +351,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -368,7 +368,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/application/general/generic/show.tsx

@@ -36,13 +36,13 @@ interface Props {
 }
 
 export const ShowProviderForm = ({ applicationId }: Props) => {
-	const { data: githubProviders, isLoading: isLoadingGithub } =
+	const { data: githubProviders, isPending: isLoadingGithub } =
 		api.github.githubProviders.useQuery();
-	const { data: gitlabProviders, isLoading: isLoadingGitlab } =
+	const { data: gitlabProviders, isPending: isLoadingGitlab } =
 		api.gitlab.gitlabProviders.useQuery();
-	const { data: bitbucketProviders, isLoading: isLoadingBitbucket } =
+	const { data: bitbucketProviders, isPending: isLoadingBitbucket } =
 		api.bitbucket.bitbucketProviders.useQuery();
-	const { data: giteaProviders, isLoading: isLoadingGitea } =
+	const { data: giteaProviders, isPending: isLoadingGitea } =
 		api.gitea.giteaProviders.useQuery();
 
 	const { data: application, refetch } = api.application.one.useQuery({

apps/dokploy/components/dashboard/application/general/show.tsx

@@ -37,14 +37,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 		{ enabled: !!applicationId },
 	);
 	const { mutateAsync: update } = api.application.update.useMutation();
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.application.start.useMutation();
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.application.stop.useMutation();
 
 	const { mutateAsync: deploy } = api.application.deploy.useMutation();
 
-	const { mutateAsync: reload, isLoading: isReloading } =
+	const { mutateAsync: reload, isPending: isReloading } =
 		api.application.reload.useMutation();
 
 	const { mutateAsync: redeploy } = api.application.redeploy.useMutation();

apps/dokploy/components/dashboard/application/logs/show.tsx

@@ -56,7 +56,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 	const [containerId, setContainerId] = useState<string | undefined>();
 	const [option, setOption] = useState<"swarm" | "native">("native");
 
-	const { data: services, isLoading: servicesLoading } =
+	const { data: services, isPending: servicesLoading } =
 		api.docker.getServiceContainersByAppName.useQuery(
 			{
 				appName,
@@ -67,7 +67,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 			},
 		);
 
-	const { data: containers, isLoading: containersLoading } =
+	const { data: containers, isPending: containersLoading } =
 		api.docker.getContainersByAppNameMatch.useQuery(
 			{
 				appName,

apps/dokploy/components/dashboard/application/patches/edit-patch-dialog.tsx

@@ -28,7 +28,7 @@ export const EditPatchDialog = ({
 	type,
 	onSuccess,
 }: Props) => {
-	const { data: patch, isLoading: isPatchLoading } = api.patch.one.useQuery(
+	const { data: patch, isPending: isPatchLoading } = api.patch.one.useQuery(
 		{ patchId },
 		{ enabled: !!patchId },
 	);
@@ -89,7 +89,7 @@ export const EditPatchDialog = ({
 					<DialogClose asChild>
 						<Button variant="outline">Cancel</Button>
 					</DialogClose>
-					<Button onClick={handleSave} isLoading={updatePatch.isLoading}>
+					<Button onClick={handleSave} isLoading={updatePatch.isPending}>
 						{updatePatch.isPending && (
 							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
 						)}

apps/dokploy/components/dashboard/application/patches/patch-editor.tsx

@@ -45,7 +45,7 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 	);
 
 	const utils = api.useUtils();
-	const { data: directories, isLoading: isDirLoading } =
+	const { data: directories, isPending: isDirLoading } =
 		api.patch.readRepoDirectories.useQuery(
 			{ id: id, type, repoPath },
 			{ enabled: !!repoPath },
@@ -56,10 +56,10 @@ export const PatchEditor = ({ id, type, repoPath, onClose }: Props) => {
 		{ enabled: !!id },
 	);
 
-	const { mutateAsync: saveAsPatch, isLoading: isSavingPatch } =
+	const { mutateAsync: saveAsPatch, isPending: isSavingPatch } =
 		api.patch.saveFileAsPatch.useMutation();
 
-	const { mutateAsync: markForDeletion, isLoading: isMarkingDeletion } =
+	const { mutateAsync: markForDeletion, isPending: isMarkingDeletion } =
 		api.patch.markFileForDeletion.useMutation();
 
 	const updatePatch = api.patch.update.useMutation();

apps/dokploy/components/dashboard/application/patches/show-patches.tsx

@@ -1,6 +1,7 @@
 import { File, FilePlus2, Loader2, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,7 +10,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
 import {
 	Table,
@@ -35,7 +35,7 @@ export const ShowPatches = ({ id, type }: Props) => {
 
 	const utils = api.useUtils();
 
-	const { data: patches, isLoading: isPatchesLoading } =
+	const { data: patches, isPending: isPatchesLoading } =
 		api.patch.byEntityId.useQuery({ id, type }, { enabled: !!id });
 
 	const mutationMap = {

apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx

@@ -75,11 +75,11 @@ export const AddPreviewDomain = ({
 		},
 	);
 
-	const { mutateAsync, isError, error, isLoading } = domainId
+	const { mutateAsync, isError, error, isPending } = domainId
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
 
-	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+	const { mutateAsync: generateDomain, isPending: isLoadingGenerate } =
 		api.domain.generateDomain.useMutation();
 
 	const form = useForm<Domain>({
@@ -103,7 +103,7 @@ export const AddPreviewDomain = ({
 		if (!domainId) {
 			form.reset({});
 		}
-	}, [form, form.reset, data, isLoading]);
+	}, [form, form.reset, data, isPending]);
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
@@ -301,7 +301,7 @@ export const AddPreviewDomain = ({
 					</form>
 
 					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
+						<Button isLoading={isPending} form="hook-form" type="submit">
 							{dictionary.submit}
 						</Button>
 					</DialogFooter>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx

@@ -43,7 +43,7 @@ interface Props {
 export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 	const { data } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync: deletePreviewDeployment, isLoading } =
+	const { mutateAsync: deletePreviewDeployment, isPending } =
 		api.previewDeployment.delete.useMutation();
 
 	const { mutateAsync: redeployPreviewDeployment } =
@@ -57,8 +57,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 		{ applicationId },
 		{
 			enabled: !!applicationId,
-			refetchInterval: (data) =>
-				data?.some((d) => d.previewStatus === "running") ? 2000 : false,
+			refetchInterval: 2000,
 		},
 	);
 
@@ -282,7 +281,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 															<Button
 																variant="ghost"
 																size="sm"
-																isLoading={isLoading}
+																isLoading={isPending}
 																className="text-red-600 hover:text-red-700 hover:bg-red-50"
 															>
 																<Trash2 className="size-4" />

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx

@@ -80,7 +80,7 @@ interface Props {
 export const ShowPreviewSettings = ({ applicationId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isEnabled, setIsEnabled] = useState(false);
-	const { mutateAsync: updateApplication, isLoading } =
+	const { mutateAsync: updateApplication, isPending } =
 		api.application.update.useMutation();
 
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
@@ -535,7 +535,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 							Cancel
 						</Button>
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							form="hook-form-delete-application"
 							type="submit"
 						>

apps/dokploy/components/dashboard/application/rollbacks/show-rollback-settings.tsx

@@ -71,7 +71,7 @@ export const ShowRollbackSettings = ({ applicationId, children }: Props) => {
 		},
 	);
 
-	const { mutateAsync: updateApplication, isLoading } =
+	const { mutateAsync: updateApplication, isPending } =
 		api.application.update.useMutation();
 
 	const { data: registries } = api.registry.all.useQuery();
@@ -212,7 +212,7 @@ export const ShowRollbackSettings = ({ applicationId, children }: Props) => {
 							/>
 						)}
 
-						<Button type="submit" className="w-full" isLoading={isLoading}>
+						<Button type="submit" className="w-full" isLoading={isPending}>
 							Save Settings
 						</Button>
 					</form>

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -275,7 +275,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 		}
 	}, [form, schedule, scheduleId]);
 
-	const { mutateAsync, isLoading } = scheduleId
+	const { mutateAsync, isPending } = scheduleId
 		? api.schedule.update.useMutation()
 		: api.schedule.create.useMutation();
 
@@ -662,7 +662,7 @@ echo "Hello, world!"
 							)}
 						/>
 
-						<Button type="submit" isLoading={isLoading} className="w-full">
+						<Button type="submit" isLoading={isPending} className="w-full">
 							{scheduleId ? "Update" : "Create"} Schedule
 						</Button>
 					</form>

apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx

@@ -51,7 +51,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 		},
 	);
 	const utils = api.useUtils();
-	const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
+	const { mutateAsync: deleteSchedule, isPending: isDeleting } =
 		api.schedule.delete.useMutation();
 	const { mutateAsync: runManually } = api.schedule.runManually.useMutation();
 

apps/dokploy/components/dashboard/application/update-application.tsx

@@ -43,7 +43,7 @@ interface Props {
 export const UpdateApplication = ({ applicationId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.application.update.useMutation();
 	const { data } = api.application.one.useQuery(
 		{
@@ -148,7 +148,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-update-application"
 										type="submit"
 									>

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -195,7 +195,7 @@ export const HandleVolumeBackups = ({
 		}
 	}, [form, volumeBackup, volumeBackupId]);
 
-	const { mutateAsync, isLoading } = volumeBackupId
+	const { mutateAsync, isPending } = volumeBackupId
 		? api.volumeBackups.update.useMutation()
 		: api.volumeBackups.create.useMutation();
 
@@ -630,7 +630,7 @@ export const HandleVolumeBackups = ({
 							)}
 						/>
 
-						<Button type="submit" isLoading={isLoading} className="w-full">
+						<Button type="submit" isLoading={isPending} className="w-full">
 							{volumeBackupId ? "Update" : "Create"} Volume Backup
 						</Button>
 					</form>

apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx

@@ -93,7 +93,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 		debouncedSetSearch(value);
 	};
 
-	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
+	const { data: files = [], isPending } = api.backup.listBackupFiles.useQuery(
 		{
 			destinationId: destinationId,
 			search: debouncedSearchTerm,
@@ -282,7 +282,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 													onValueChange={handleSearchChange}
 													className="h-9"
 												/>
-												{isLoading ? (
+												{isPending ? (
 													<div className="py-6 text-center text-sm">
 														Loading backup files...
 													</div>

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -54,7 +54,7 @@ export const ShowVolumeBackups = ({
 		},
 	);
 	const utils = api.useUtils();
-	const { mutateAsync: deleteVolumeBackup, isLoading: isDeleting } =
+	const { mutateAsync: deleteVolumeBackup, isPending: isDeleting } =
 		api.volumeBackups.delete.useMutation();
 	const { mutateAsync: runManually } =
 		api.volumeBackups.runManually.useMutation();

apps/dokploy/components/dashboard/compose/advanced/add-command.tsx

@@ -52,7 +52,7 @@ export const AddCommandCompose = ({ composeId }: Props) => {
 
 	const utils = api.useUtils();
 
-	const { mutateAsync, isLoading } = api.compose.update.useMutation();
+	const { mutateAsync, isPending } = api.compose.update.useMutation();
 
 	const form = useForm<AddCommand>({
 		defaultValues: {
@@ -128,7 +128,7 @@ export const AddCommandCompose = ({ composeId }: Props) => {
 							/>
 						</div>
 						<div className="flex justify-end">
-							<Button isLoading={isLoading} type="submit" className="w-fit">
+							<Button isLoading={isPending} type="submit" className="w-fit">
 								Save
 							</Button>
 						</div>

apps/dokploy/components/dashboard/compose/delete-service.tsx

@@ -74,7 +74,7 @@ export const DeleteService = ({ id, type }: Props) => {
 		mongo: () => api.mongo.remove.useMutation(),
 		compose: () => api.compose.delete.useMutation(),
 	};
-	const { mutateAsync, isLoading } = mutationMap[type]
+	const { mutateAsync, isPending } = mutationMap[type]
 		? mutationMap[type]()
 		: api.mongo.remove.useMutation();
 	const { push } = useRouter();
@@ -130,7 +130,7 @@ export const DeleteService = ({ id, type }: Props) => {
 					variant="ghost"
 					size="icon"
 					className="group hover:bg-red-500/10 "
-					isLoading={isLoading}
+					isLoading={isPending}
 				>
 					<Trash2 className="size-4 text-primary group-hover:text-red-500" />
 				</Button>
@@ -228,7 +228,7 @@ export const DeleteService = ({ id, type }: Props) => {
 					</Button>
 
 					<Button
-						isLoading={isLoading}
+						isLoading={isPending}
 						disabled={isDisabled}
 						form="hook-form-delete-compose"
 						type="submit"

apps/dokploy/components/dashboard/compose/general/actions.tsx

@@ -28,9 +28,9 @@ export const ComposeActions = ({ composeId }: Props) => {
 	const { mutateAsync: update } = api.compose.update.useMutation();
 	const { mutateAsync: deploy } = api.compose.deploy.useMutation();
 	const { mutateAsync: redeploy } = api.compose.redeploy.useMutation();
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.compose.start.useMutation();
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.compose.stop.useMutation();
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">

apps/dokploy/components/dashboard/compose/general/compose-file-editor.tsx

@@ -34,7 +34,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 		{ enabled: !!composeId },
 	);
 
-	const { mutateAsync, isLoading } = api.compose.update.useMutation();
+	const { mutateAsync, isPending } = api.compose.update.useMutation();
 	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
 	const form = useForm<AddComposeFile>({
@@ -93,7 +93,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
+			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}
@@ -103,7 +103,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [form, onSubmit, isLoading]);
+	}, [form, onSubmit, isPending]);
 
 	return (
 		<>
@@ -167,7 +167,7 @@ services:
 					<Button
 						type="submit"
 						form="hook-form-save-compose-file"
-						isLoading={isLoading}
+						isLoading={isPending}
 						className="lg:w-fit w-full"
 					>
 						Save

apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx

@@ -74,7 +74,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 		api.bitbucket.bitbucketProviders.useQuery();
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
 
-	const { mutateAsync, isLoading: isSavingBitbucketProvider } =
+	const { mutateAsync, isPending: isSavingBitbucketProvider } =
 		api.compose.update.useMutation();
 
 	const form = useForm({
@@ -335,7 +335,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -352,7 +352,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx

@@ -58,7 +58,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 	const { data: sshKeys } = api.sshKey.all.useQuery();
 	const router = useRouter();
 
-	const { mutateAsync, isLoading } = api.compose.update.useMutation();
+	const { mutateAsync, isPending } = api.compose.update.useMutation();
 
 	const form = useForm({
 		defaultValues: {
@@ -318,7 +318,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				</div>
 
 				<div className="flex flex-row justify-end">
-					<Button type="submit" className="w-fit" isLoading={isLoading}>
+					<Button type="submit" className="w-fit" isLoading={isPending}>
 						Save{" "}
 					</Button>
 				</div>

apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx

@@ -72,7 +72,7 @@ interface Props {
 export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
-	const { mutateAsync, isLoading: isSavingGiteaProvider } =
+	const { mutateAsync, isPending: isSavingGiteaProvider } =
 		api.compose.update.useMutation();
 
 	const form = useForm({
@@ -331,7 +331,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(

apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx

@@ -72,7 +72,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 	const { data: githubProviders } = api.github.githubProviders.useQuery();
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
 
-	const { mutateAsync, isLoading: isSavingGithubProvider } =
+	const { mutateAsync, isPending: isSavingGithubProvider } =
 		api.compose.update.useMutation();
 
 	const form = useForm({
@@ -94,7 +94,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
 	const triggerType = form.watch("triggerType");
-	const { data: repositories, isLoading: isLoadingRepositories } =
+	const { data: repositories, isPending: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
 				githubId,
@@ -321,7 +321,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -338,7 +338,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx

@@ -74,7 +74,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
 
-	const { mutateAsync, isLoading: isSavingGitlabProvider } =
+	const { mutateAsync, isPending: isSavingGitlabProvider } =
 		api.compose.update.useMutation();
 
 	const form = useForm({
@@ -353,7 +353,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
+													{status === "pending" && fetchStatus === "fetching"
 														? "Loading...."
 														: field.value
 															? branches?.find(
@@ -370,7 +370,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 													placeholder="Search branch..."
 													className="h-9"
 												/>
-												{status === "loading" && fetchStatus === "fetching" && (
+												{status === "pending" && fetchStatus === "fetching" && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
 														Loading Branches....
 													</span>

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -27,13 +27,13 @@ interface Props {
 }
 
 export const ShowProviderFormCompose = ({ composeId }: Props) => {
-	const { data: githubProviders, isLoading: isLoadingGithub } =
+	const { data: githubProviders, isPending: isLoadingGithub } =
 		api.github.githubProviders.useQuery();
-	const { data: gitlabProviders, isLoading: isLoadingGitlab } =
+	const { data: gitlabProviders, isPending: isLoadingGitlab } =
 		api.gitlab.gitlabProviders.useQuery();
-	const { data: bitbucketProviders, isLoading: isLoadingBitbucket } =
+	const { data: bitbucketProviders, isPending: isLoadingBitbucket } =
 		api.bitbucket.bitbucketProviders.useQuery();
-	const { data: giteaProviders, isLoading: isLoadingGitea } =
+	const { data: giteaProviders, isPending: isLoadingGitea } =
 		api.gitea.giteaProviders.useQuery();
 
 	const { mutateAsync: disconnectGitProvider } =

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -32,7 +32,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 		},
 	);
 
-	const { mutateAsync, isLoading } = api.compose.fetchSourceType.useMutation();
+	const { mutateAsync, isPending } = api.compose.fetchSourceType.useMutation();
 
 	useEffect(() => {
 		if (isOpen) {
@@ -66,7 +66,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					Preview your docker-compose file with added domains. Note: At least
 					one domain must be specified for this conversion to take effect.
 				</AlertBlock>
-				{isLoading ? (
+				{isPending ? (
 					<div className="flex flex-row items-center justify-center min-h-[25rem] border p-4 rounded-md">
 						<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
 					</div>
@@ -82,7 +82,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 						<div className="flex flex-row gap-2 justify-end my-4">
 							<Button
 								variant="secondary"
-								isLoading={isLoading}
+								isLoading={isPending}
 								onClick={() => {
 									mutateAsync({ composeId })
 										.then(() => {

apps/dokploy/components/dashboard/compose/logs/show-stack.tsx

@@ -41,7 +41,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 	const [option, setOption] = useState<"swarm" | "native">("native");
 	const [containerId, setContainerId] = useState<string | undefined>();
 
-	const { data: services, isLoading: servicesLoading } =
+	const { data: services, isPending: servicesLoading } =
 		api.docker.getStackContainersByAppName.useQuery(
 			{
 				appName,
@@ -52,7 +52,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 			},
 		);
 
-	const { data: containers, isLoading: containersLoading } =
+	const { data: containers, isPending: containersLoading } =
 		api.docker.getContainersByAppNameMatch.useQuery(
 			{
 				appName,

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -1,8 +1,8 @@
 import { Loader2 } from "lucide-react";
-import { badgeStateColor } from "@/components/dashboard/application/logs/show";
-import { Badge } from "@/components/ui/badge";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -42,7 +42,7 @@ export const ShowDockerLogsCompose = ({
 	appType,
 	serverId,
 }: Props) => {
-	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
+	const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName,
 			appType,
@@ -73,7 +73,7 @@ export const ShowDockerLogsCompose = ({
 				<Label>Select a container to view logs</Label>
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
-						{isLoading ? (
+						{isPending ? (
 							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
 								<span>Loading...</span>
 								<Loader2 className="animate-spin size-4" />

apps/dokploy/components/dashboard/compose/update-compose.tsx

@@ -43,7 +43,7 @@ interface Props {
 export const UpdateCompose = ({ composeId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.compose.update.useMutation();
 	const { data } = api.compose.one.useQuery(
 		{
@@ -148,7 +148,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-update-compose"
 										type="submit"
 									>

apps/dokploy/components/dashboard/database/backups/handle-backup.tsx

@@ -192,7 +192,7 @@ export const HandleBackup = ({
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 
-	const { data, isLoading } = api.destination.all.useQuery();
+	const { data, isPending } = api.destination.all.useQuery();
 	const { data: backup } = api.backup.one.useQuery(
 		{
 			backupId: backupId ?? "",
@@ -202,7 +202,7 @@ export const HandleBackup = ({
 		},
 	);
 	const [cacheType, setCacheType] = useState<CacheType>("cache");
-	const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } =
+	const { mutateAsync: createBackup, isPending: isCreatingPostgresBackup } =
 		backupId
 			? api.backup.update.useMutation()
 			: api.backup.create.useMutation();
@@ -396,7 +396,7 @@ export const HandleBackup = ({
 															!field.value && "text-muted-foreground",
 														)}
 													>
-														{isLoading
+														{isPending
 															? "Loading...."
 															: field.value
 																? data?.find(
@@ -415,7 +415,7 @@ export const HandleBackup = ({
 														placeholder="Search Destination..."
 														className="h-9"
 													/>
-													{isLoading && (
+													{isPending && (
 														<span className="py-6 text-center text-sm">
 															Loading Destinations....
 														</span>

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -233,7 +233,7 @@ export const RestoreBackup = ({
 		debouncedSetSearch(value);
 	};
 
-	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
+	const { data: files = [], isPending } = api.backup.listBackupFiles.useQuery(
 		{
 			destinationId: destionationId,
 			search: debouncedSearchTerm,
@@ -442,7 +442,7 @@ export const RestoreBackup = ({
 													onValueChange={handleSearchChange}
 													className="h-9"
 												/>
-												{isLoading ? (
+												{isPending ? (
 													<div className="py-6 text-center text-sm">
 														Loading backup files...
 													</div>

apps/dokploy/components/dashboard/database/backups/show-backups.tsx

@@ -89,11 +89,11 @@ export const ShowBackups = ({
 
 	const mutation = mutationMap[key as keyof typeof mutationMap];
 
-	const { mutateAsync: manualBackup, isLoading: isManualBackup } = mutation
+	const { mutateAsync: manualBackup, isPending: isManualBackup } = mutation
 		? mutation
 		: api.backup.manualBackupMongo.useMutation();
 
-	const { mutateAsync: deleteBackup, isLoading: isRemoving } =
+	const { mutateAsync: deleteBackup, isPending: isRemoving } =
 		api.backup.remove.useMutation();
 
 	return (

apps/dokploy/components/dashboard/docker/show/show-containers.tsx

@@ -45,7 +45,7 @@ interface Props {
 }
 
 export const ShowContainers = ({ serverId }: Props) => {
-	const { data, isLoading } = api.docker.getContainers.useQuery({
+	const { data, isPending } = api.docker.getContainers.useQuery({
 		serverId,
 	});
 
@@ -137,7 +137,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 									</DropdownMenu>
 								</div>
 								<div className="rounded-md border">
-									{isLoading ? (
+									{isPending ? (
 										<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
 											<span className="text-muted-foreground text-lg font-medium">
 												Loading...
@@ -192,7 +192,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 															colSpan={columns.length}
 															className="h-24 text-center"
 														>
-															{isLoading ? (
+															{isPending ? (
 																<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
 																	<span className="text-muted-foreground text-lg font-medium">
 																		Loading...

apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx

@@ -51,7 +51,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 	const [canEdit, setCanEdit] = useState(true);
 	const [skipYamlValidation, setSkipYamlValidation] = useState(false);
 
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.settings.updateTraefikFile.useMutation();
 
 	const form = useForm<UpdateServerMiddlewareConfig>({
@@ -182,8 +182,8 @@ routers:
 						</p>
 						<div className="flex justify-end">
 							<Button
-								isLoading={isLoading}
-								disabled={canEdit || isLoading}
+								isLoading={isPending}
+								disabled={canEdit || isLoadingFile}
 								type="submit"
 							>
 								Update

apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx

@@ -48,7 +48,7 @@ interface Props {
 export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 	const { data: ip } = api.settings.getIp.useQuery();
 	const { data, refetch } = api.mariadb.one.useQuery({ mariadbId });
-	const { mutateAsync, isLoading } = api.mariadb.saveExternalPort.useMutation();
+	const { mutateAsync, isPending } = api.mariadb.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
 	const getIp = data?.server?.ipAddress || ip;
 	const form = useForm({
@@ -161,7 +161,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 								)}
 
 								<div className="flex justify-end">
-									<Button type="submit" isLoading={isLoading}>
+									<Button type="submit" isLoading={isPending}>
 										Save
 									</Button>
 								</div>

apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx

@@ -28,13 +28,13 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 		{ enabled: !!mariadbId },
 	);
 
-	const { mutateAsync: reload, isLoading: isReloading } =
+	const { mutateAsync: reload, isPending: isReloading } =
 		api.mariadb.reload.useMutation();
 
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.mariadb.start.useMutation();
 
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.mariadb.stop.useMutation();
 
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);

apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx

@@ -42,7 +42,7 @@ interface Props {
 
 export const UpdateMariadb = ({ mariadbId }: Props) => {
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.mariadb.update.useMutation();
 	const { data } = api.mariadb.one.useQuery(
 		{
@@ -146,7 +146,7 @@ export const UpdateMariadb = ({ mariadbId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-update-mariadb"
 										type="submit"
 									>

apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx

@@ -48,7 +48,7 @@ interface Props {
 export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 	const { data: ip } = api.settings.getIp.useQuery();
 	const { data, refetch } = api.mongo.one.useQuery({ mongoId });
-	const { mutateAsync, isLoading } = api.mongo.saveExternalPort.useMutation();
+	const { mutateAsync, isPending } = api.mongo.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
 	const getIp = data?.server?.ipAddress || ip;
 	const form = useForm({
@@ -160,7 +160,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 								)}
 
 								<div className="flex justify-end">
-									<Button type="submit" isLoading={isLoading}>
+									<Button type="submit" isLoading={isPending}>
 										Save
 									</Button>
 								</div>

apps/dokploy/components/dashboard/mongo/general/show-general-mongo.tsx

@@ -28,13 +28,13 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 		{ enabled: !!mongoId },
 	);
 
-	const { mutateAsync: reload, isLoading: isReloading } =
+	const { mutateAsync: reload, isPending: isReloading } =
 		api.mongo.reload.useMutation();
 
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.mongo.start.useMutation();
 
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.mongo.stop.useMutation();
 
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);

apps/dokploy/components/dashboard/mongo/update-mongo.tsx

@@ -43,7 +43,7 @@ interface Props {
 export const UpdateMongo = ({ mongoId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.mongo.update.useMutation();
 	const { data } = api.mongo.one.useQuery(
 		{
@@ -148,7 +148,7 @@ export const UpdateMongo = ({ mongoId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-update-mongo"
 										type="submit"
 									>

apps/dokploy/components/dashboard/monitoring/free/container/show-free-compose-monitoring.tsx

@@ -34,7 +34,7 @@ export const ComposeFreeMonitoring = ({
 	appType = "stack",
 	serverId,
 }: Props) => {
-	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
+	const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName: appName,
 			appType,
@@ -51,7 +51,7 @@ export const ComposeFreeMonitoring = ({
 
 	const [containerId, setContainerId] = useState<string | undefined>();
 
-	const { mutateAsync: restart, isLoading: isRestarting } =
+	const { mutateAsync: restart, isPending: isRestarting } =
 		api.docker.restartContainer.useMutation();
 
 	useEffect(() => {
@@ -81,7 +81,7 @@ export const ComposeFreeMonitoring = ({
 						value={containerAppName}
 					>
 						<SelectTrigger>
-							{isLoading ? (
+							{isPending ? (
 								<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
 									<span>Loading...</span>
 									<Loader2 className="animate-spin size-4" />

apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx

@@ -39,7 +39,7 @@ export const ComposePaidMonitoring = ({
 	baseUrl,
 	token,
 }: Props) => {
-	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
+	const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName: appName,
 			appType,
@@ -56,7 +56,7 @@ export const ComposePaidMonitoring = ({
 
 	const [containerId, setContainerId] = useState<string | undefined>();
 
-	const { mutateAsync: restart, isLoading: isRestarting } =
+	const { mutateAsync: restart, isPending: isRestarting } =
 		api.docker.restartContainer.useMutation();
 
 	useEffect(() => {
@@ -87,7 +87,7 @@ export const ComposePaidMonitoring = ({
 							value={containerAppName}
 						>
 							<SelectTrigger>
-								{isLoading ? (
+								{isPending ? (
 									<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
 										<span>Loading...</span>
 										<Loader2 className="animate-spin size-4" />

apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx

@@ -48,7 +48,7 @@ interface Props {
 export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 	const { data: ip } = api.settings.getIp.useQuery();
 	const { data, refetch } = api.mysql.one.useQuery({ mysqlId });
-	const { mutateAsync, isLoading } = api.mysql.saveExternalPort.useMutation();
+	const { mutateAsync, isPending } = api.mysql.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
 	const getIp = data?.server?.ipAddress || ip;
 	const form = useForm({
@@ -160,7 +160,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 								)}
 
 								<div className="flex justify-end">
-									<Button type="submit" isLoading={isLoading}>
+									<Button type="submit" isLoading={isPending}>
 										Save
 									</Button>
 								</div>

apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx

@@ -28,12 +28,12 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 		{ enabled: !!mysqlId },
 	);
 
-	const { mutateAsync: reload, isLoading: isReloading } =
+	const { mutateAsync: reload, isPending: isReloading } =
 		api.mysql.reload.useMutation();
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.mysql.start.useMutation();
 
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.mysql.stop.useMutation();
 
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);

apps/dokploy/components/dashboard/mysql/update-mysql.tsx

@@ -42,7 +42,7 @@ interface Props {
 
 export const UpdateMysql = ({ mysqlId }: Props) => {
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.mysql.update.useMutation();
 	const { data } = api.mysql.one.useQuery(
 		{
@@ -146,7 +146,7 @@ export const UpdateMysql = ({ mysqlId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-mysql-update"
 										type="submit"
 									>

apps/dokploy/components/dashboard/organization/handle-organization.tsx

@@ -52,7 +52,7 @@ export function AddOrganization({ organizationId }: Props) {
 			enabled: !!organizationId,
 		},
 	);
-	const { mutateAsync, isLoading } = organizationId
+	const { mutateAsync, isPending } = organizationId
 		? api.organization.update.useMutation()
 		: api.organization.create.useMutation();
 	const { refetch: refetchActiveOrganization } =
@@ -177,7 +177,7 @@ export function AddOrganization({ organizationId }: Props) {
 							)}
 						/>
 						<DialogFooter>
-							<Button type="submit" isLoading={isLoading}>
+							<Button type="submit" isLoading={isPending}>
 								{organizationId ? "Update organization" : "Create organization"}
 							</Button>
 						</DialogFooter>

apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx

@@ -48,7 +48,7 @@ interface Props {
 export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 	const { data: ip } = api.settings.getIp.useQuery();
 	const { data, refetch } = api.postgres.one.useQuery({ postgresId });
-	const { mutateAsync, isLoading } =
+	const { mutateAsync, isPending } =
 		api.postgres.saveExternalPort.useMutation();
 	const getIp = data?.server?.ipAddress || ip;
 	const [connectionUrl, setConnectionUrl] = useState("");
@@ -162,7 +162,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 								)}
 
 								<div className="flex justify-end">
-									<Button type="submit" isLoading={isLoading}>
+									<Button type="submit" isLoading={isPending}>
 										Save
 									</Button>
 								</div>

apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx

@@ -28,13 +28,13 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 		{ enabled: !!postgresId },
 	);
 
-	const { mutateAsync: reload, isLoading: isReloading } =
+	const { mutateAsync: reload, isPending: isReloading } =
 		api.postgres.reload.useMutation();
 
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.postgres.stop.useMutation();
 
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.postgres.start.useMutation();
 
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);

apps/dokploy/components/dashboard/postgres/update-postgres.tsx

@@ -43,7 +43,7 @@ interface Props {
 export const UpdatePostgres = ({ postgresId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.postgres.update.useMutation();
 	const { data } = api.postgres.one.useQuery(
 		{
@@ -148,7 +148,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-update-postgres"
 										type="submit"
 										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"

apps/dokploy/components/dashboard/project/add-application.tsx

@@ -81,7 +81,7 @@ export const AddApplication = ({ environmentId, projectName }: Props) => {
 	// Self-hosted: show only if there are remote servers (Dokploy is default, hide if no remote servers)
 	const shouldShowServerDropdown = hasServers;
 
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.application.create.useMutation();
 
 	const form = useForm<AddTemplate>({
@@ -283,7 +283,7 @@ export const AddApplication = ({ environmentId, projectName }: Props) => {
 					</form>
 
 					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
+						<Button isLoading={isPending} form="hook-form" type="submit">
 							Create
 						</Button>
 					</DialogFooter>

apps/dokploy/components/dashboard/project/add-compose.tsx

@@ -75,7 +75,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 	const slug = slugify(projectName);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.compose.create.useMutation();
 
 	// Get environment data to extract projectId
@@ -307,7 +307,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 					</form>
 
 					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
+						<Button isLoading={isPending} form="hook-form" type="submit">
 							Create
 						</Button>
 					</DialogFooter>

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -116,7 +116,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 	);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
-	const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
+	const { data: tags, isPending: isLoadingTags } = api.compose.getTags.useQuery(
 		{ baseUrl: customBaseUrl },
 		{
 			enabled: open,
@@ -125,7 +125,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 	const utils = api.useUtils();
 
 	const [serverId, setServerId] = useState<string | undefined>(undefined);
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.compose.deployTemplate.useMutation();
 
 	const templates =
@@ -512,7 +512,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 													<AlertDialogFooter>
 														<AlertDialogCancel>Cancel</AlertDialogCancel>
 														<AlertDialogAction
-															disabled={isLoading}
+															disabled={isPending}
 															onClick={async () => {
 																const promise = mutateAsync({
 																	serverId:

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx

@@ -334,9 +334,9 @@ export const AdvancedEnvironmentSelector = ({
 						</Button>
 						<Button
 							onClick={handleCreateEnvironment}
-							disabled={!name.trim() || createEnvironment.isLoading}
+							disabled={!name.trim() || createEnvironment.isPending}
 						>
-							{createEnvironment.isLoading ? "Creating..." : "Create"}
+							{createEnvironment.isPending ? "Creating..." : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>
@@ -387,9 +387,9 @@ export const AdvancedEnvironmentSelector = ({
 						</Button>
 						<Button
 							onClick={handleUpdateEnvironment}
-							disabled={!name.trim() || updateEnvironment.isLoading}
+							disabled={!name.trim() || updateEnvironment.isPending}
 						>
-							{updateEnvironment.isLoading ? "Updating..." : "Update"}
+							{updateEnvironment.isPending ? "Updating..." : "Update"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>
@@ -427,12 +427,12 @@ export const AdvancedEnvironmentSelector = ({
 							variant="destructive"
 							onClick={handleDeleteEnvironment}
 							disabled={
-								deleteEnvironment.isLoading ||
+								deleteEnvironment.isPending ||
 								haveServices ||
 								!selectedEnvironment
 							}
 						>
-							{deleteEnvironment.isLoading ? "Deleting..." : "Delete"}
+							{deleteEnvironment.isPending ? "Deleting..." : "Delete"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>

apps/dokploy/components/dashboard/project/ai/step-two.tsx

@@ -28,7 +28,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 	const suggestions = templateInfo.suggestions || [];
 	const selectedVariant = templateInfo.details;
 
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isPending, error, isError } =
 		api.ai.suggest.useMutation();
 
 	useEffect(() => {
@@ -184,7 +184,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 			</div>
 		);
 	}
-	if (isLoading) {
+	if (isPending) {
 		return (
 			<div className="flex flex-col items-center justify-center h-full space-y-4">
 				<Bot className="w-16 h-16 text-primary animate-pulse" />

apps/dokploy/components/dashboard/project/duplicate-project.tsx

@@ -76,7 +76,7 @@ export const DuplicateProject = ({
 		selectedServiceIds.includes(service.id),
 	);
 
-	const { mutateAsync: duplicateProject, isLoading } =
+	const { mutateAsync: duplicateProject, isPending } =
 		api.project.duplicate.useMutation({
 			onSuccess: async (newProject) => {
 				await utils.project.all.invalidate();
@@ -321,20 +321,20 @@ export const DuplicateProject = ({
 					<Button
 						variant="outline"
 						onClick={() => setOpen(false)}
-						disabled={isLoading}
+						disabled={isPending}
 					>
 						Cancel
 					</Button>
 					<Button
 						onClick={handleDuplicate}
 						disabled={
-							isLoading ||
+							isPending ||
 							(duplicateType === "new-project" && !name) ||
 							(duplicateType === "existing-environment" &&
 								(!selectedTargetProject || !selectedTargetEnvironment))
 						}
 					>
-						{isLoading ? (
+						{isPending ? (
 							<>
 								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
 								{duplicateType === "new-project"

apps/dokploy/components/dashboard/project/environment-variables.tsx

@@ -41,7 +41,7 @@ interface Props {
 export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.environment.update.useMutation();
 	const { data } = api.environment.one.useQuery(
 		{
@@ -85,7 +85,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading && isOpen) {
+			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending && isOpen) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}
@@ -95,7 +95,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [form, onSubmit, isLoading, isOpen]);
+	}, [form, onSubmit, isPending, isOpen]);
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -158,7 +158,7 @@ API_KEY=your-api-key-here
 									)}
 								/>
 								<DialogFooter>
-									<Button isLoading={isLoading} type="submit">
+									<Button isLoading={isPending} type="submit">
 										Update
 									</Button>
 								</DialogFooter>

apps/dokploy/components/dashboard/projects/project-environment.tsx

@@ -41,7 +41,7 @@ interface Props {
 export const ProjectEnvironment = ({ projectId, children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.project.update.useMutation();
 	const { data } = api.project.one.useQuery(
 		{
@@ -84,7 +84,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading && isOpen) {
+			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending && isOpen) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}
@@ -94,7 +94,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [form, onSubmit, isLoading, isOpen]);
+	}, [form, onSubmit, isPending, isOpen]);
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -155,7 +155,7 @@ PORT=3000
 									)}
 								/>
 								<DialogFooter>
-									<Button isLoading={isLoading} type="submit">
+									<Button isLoading={isPending} type="submit">
 										Update
 									</Button>
 								</DialogFooter>

apps/dokploy/components/dashboard/projects/show.tsx

@@ -63,7 +63,7 @@ export const ShowProjects = () => {
 	const utils = api.useUtils();
 	const router = useRouter();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
-	const { data, isLoading } = api.project.all.useQuery();
+	const { data, isPending } = api.project.all.useQuery();
 	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 
@@ -200,7 +200,7 @@ export const ShowProjects = () => {
 						</div>
 
 						<CardContent className="space-y-2 py-8 border-t gap-4 flex flex-col min-h-[60vh]">
-							{isLoading ? (
+							{isPending ? (
 								<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[60vh]">
 									<span>Loading...</span>
 									<Loader2 className="animate-spin size-4" />

apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx

@@ -48,7 +48,7 @@ interface Props {
 export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 	const { data: ip } = api.settings.getIp.useQuery();
 	const { data, refetch } = api.redis.one.useQuery({ redisId });
-	const { mutateAsync, isLoading } = api.redis.saveExternalPort.useMutation();
+	const { mutateAsync, isPending } = api.redis.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
 	const getIp = data?.server?.ipAddress || ip;
 
@@ -154,7 +154,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 								)}
 
 								<div className="flex justify-end">
-									<Button type="submit" isLoading={isLoading}>
+									<Button type="submit" isLoading={isPending}>
 										Save
 									</Button>
 								</div>

apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx

@@ -28,12 +28,12 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 		{ enabled: !!redisId },
 	);
 
-	const { mutateAsync: reload, isLoading: isReloading } =
+	const { mutateAsync: reload, isPending: isReloading } =
 		api.redis.reload.useMutation();
-	const { mutateAsync: start, isLoading: isStarting } =
+	const { mutateAsync: start, isPending: isStarting } =
 		api.redis.start.useMutation();
 
-	const { mutateAsync: stop, isLoading: isStopping } =
+	const { mutateAsync: stop, isPending: isStopping } =
 		api.redis.stop.useMutation();
 
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);

apps/dokploy/components/dashboard/redis/update-redis.tsx

@@ -42,7 +42,7 @@ interface Props {
 
 export const UpdateRedis = ({ redisId }: Props) => {
 	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
+	const { mutateAsync, error, isError, isPending } =
 		api.redis.update.useMutation();
 	const { data } = api.redis.one.useQuery(
 		{
@@ -146,7 +146,7 @@ export const UpdateRedis = ({ redisId }: Props) => {
 								/>
 								<DialogFooter>
 									<Button
-										isLoading={isLoading}
+										isLoading={isPending}
 										form="hook-form-update-redis"
 										type="submit"
 									>

apps/dokploy/components/dashboard/settings/ai-form.tsx

@@ -15,8 +15,8 @@ import { api } from "@/utils/api";
 import { HandleAi } from "./handle-ai";
 
 export const AiForm = () => {
-	const { data: aiConfigs, refetch, isLoading } = api.ai.getAll.useQuery();
-	const { mutateAsync, isLoading: isRemoving } = api.ai.delete.useMutation();
+	const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery();
+	const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation();
 
 	return (
 		<div className="w-full">
@@ -33,7 +33,7 @@ export const AiForm = () => {
 						{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
-						{isLoading ? (
+						{isPending ? (
 							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
 								<span>Loading...</span>
 								<Loader2 className="animate-spin size-4" />

apps/dokploy/components/dashboard/settings/api/show-api-keys.tsx

@@ -17,7 +17,7 @@ import { AddApiKey } from "./add-api-key";
 
 export const ShowApiKeys = () => {
 	const { data, refetch } = api.user.get.useQuery();
-	const { mutateAsync: deleteApiKey, isLoading: isLoadingDelete } =
+	const { mutateAsync: deleteApiKey, isPending: isLoadingDelete } =
 		api.user.deleteApiKey.useMutation();
 
 	return (

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -81,7 +81,7 @@ export const ShowBilling = () => {
 	const router = useRouter();
 	const { data: servers } = api.server.count.useQuery();
 	const { data: admin } = api.user.get.useQuery();
-	const { data, isLoading } = api.stripe.getProducts.useQuery();
+	const { data, isPending } = api.stripe.getProducts.useQuery();
 	const { mutateAsync: createCheckoutSession } =
 		api.stripe.createCheckoutSession.useMutation();
 
@@ -643,7 +643,7 @@ export const ShowBilling = () => {
 									</Link>
 								</Button>
 							</div>
-							{isLoading ? (
+							{isPending ? (
 								<span className="text-base text-muted-foreground flex flex-row gap-3 items-center justify-center min-h-[10vh]">
 									Loading...
 									<Loader2 className="animate-spin" />

apps/dokploy/components/dashboard/settings/billing/show-invoices.tsx

@@ -53,11 +53,11 @@ const getStatusBadge = (status: Stripe.Invoice.Status | null) => {
 };
 
 export const ShowInvoices = () => {
-	const { data: invoices, isLoading } = api.stripe.getInvoices.useQuery();
+	const { data: invoices, isPending } = api.stripe.getInvoices.useQuery();
 
 	return (
 		<div className="space-y-4">
-			{isLoading ? (
+			{isPending ? (
 				<div className="flex items-center justify-center min-h-[20vh]">
 					<span className="text-base text-muted-foreground flex flex-row gap-3 items-center">
 						Loading invoices...

apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx

@@ -12,7 +12,7 @@ export const ShowWelcomeDokploy = () => {
 	const { data } = api.user.get.useQuery();
 	const [open, setOpen] = useState(false);
 
-	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
+	const { data: isCloud, isPending } = api.settings.isCloud.useQuery();
 
 	if (!isCloud || data?.role !== "admin") {
 		return null;
@@ -20,14 +20,14 @@ export const ShowWelcomeDokploy = () => {
 
 	useEffect(() => {
 		if (
-			!isLoading &&
+			!isPending &&
 			isCloud &&
 			!localStorage.getItem("hasSeenCloudWelcomeModal") &&
 			data?.role === "owner"
 		) {
 			setOpen(true);
 		}
-	}, [isCloud, isLoading]);
+	}, [isCloud, isPending]);
 
 	const handleClose = (isOpen: boolean) => {
 		if (data?.role === "owner") {

apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx

@@ -62,7 +62,7 @@ export const AddCertificate = () => {
 	const utils = api.useUtils();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
-	const { mutateAsync, isError, error, isLoading } =
+	const { mutateAsync, isError, error, isPending } =
 		api.certificates.create.useMutation();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const hasServers = servers && servers.length > 0;
@@ -247,7 +247,7 @@ export const AddCertificate = () => {
 
 					<DialogFooter className="flex w-full flex-row !justify-end">
 						<Button
-							isLoading={isLoading}
+							isLoading={isPending}
 							form="hook-form-add-certificate"
 							type="submit"
 						>

apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx

@@ -15,9 +15,9 @@ import { AddCertificate } from "./add-certificate";
 import { getCertificateChainInfo, getExpirationStatus } from "./utils";
 
 export const ShowCertificates = () => {
-	const { mutateAsync, isLoading: isRemoving } =
+	const { mutateAsync, isPending: isRemoving } =
 		api.certificates.remove.useMutation();
-	const { data, isLoading, refetch } = api.certificates.all.useQuery();
+	const { data, isPending, refetch } = api.certificates.all.useQuery();
 
 	return (
 		<div className="w-full">
@@ -40,7 +40,7 @@ export const ShowCertificates = () => {
 						</AlertBlock>
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
-						{isLoading ? (
+						{isPending ? (
 							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
 								<span>Loading...</span>
 								<Loader2 className="animate-spin size-4" />