From 432f6168968ce5b1d416a883590ce318259be9e9 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 4 May 2025 12:16:56 -0600
Subject: [PATCH] Add ValidationStates type for improved domain validation
 handling

- Introduced `ValidationStates` type to enhance the structure and clarity of domain validation logic in the ShowDomains component.
- This addition aims to streamline the management of validation states, contributing to better code organization and maintainability.
---
 .../application/domains/show-domains.tsx      | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
index b1222006c..26df7b696 100644
--- a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
@@ -41,6 +41,8 @@ export type ValidationState = {
 	message?: string;
 };
 
+export type ValidationStates = Record<string, ValidationState>;
+
 interface Props {
 	id: string;
 	type: "application" | "compose";
@@ -70,24 +72,27 @@ export const ShowDomains = ({ id, type }: Props) => {
 	);
 	const { data: ip } = api.settings.getIp.useQuery();
 
-	const { data, refetch } =
-		type === "application"
-			? api.domain.byApplicationId.useQuery(
-					{
-						applicationId: id,
-					},
-					{
-						enabled: !!id,
-					},
-				)
-			: api.domain.byComposeId.useQuery(
-					{
-						composeId: id,
-					},
-					{
-						enabled: !!id,
-					},
-				);
+	const {
+		data,
+		refetch,
+		isLoading: isLoadingDomains,
+	} = type === "application"
+		? api.domain.byApplicationId.useQuery(
+				{
+					applicationId: id,
+				},
+				{
+					enabled: !!id,
+				},
+			)
+		: api.domain.byComposeId.useQuery(
+				{
+					composeId: id,
+				},
+				{
+					enabled: !!id,
+				},
+			);
 
 	const { mutateAsync: validateDomain } =
 		api.domain.validateDomain.useMutation();
@@ -152,7 +157,14 @@ export const ShowDomains = ({ id, type }: Props) => {
 					</div>
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
-					{data?.length === 0 ? (
+					{isLoadingDomains ? (
+						<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
+							<Loader2 className="size-5 animate-spin text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								Loading domains...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
 						<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[40vh]">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
@@ -168,7 +180,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 							</div>
 						</div>
 					) : (
-						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh]">
+						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
 							{data?.map((item) => {
 								const validationState = validationStates[item.host];
 								return (