From b4b2d12f6e435bed53fb6d206e51850d1c7980a7 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Fri, 16 May 2025 23:16:02 -0600
Subject: [PATCH] feat(ui): add loading state and no data message to converted
 compose display

---
 .../general/show-converted-compose.tsx        | 74 +++++++++++--------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx b/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
index 89a9e075..77f331bd 100644
--- a/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
@@ -10,7 +10,7 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { Puzzle, RefreshCw } from "lucide-react";
+import { Loader2, Puzzle, RefreshCw } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -66,36 +66,50 @@ 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 ? (
+					<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>
+				) : compose?.length === 5 ? (
+					<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-[25rem]">
+						<Puzzle className="h-8 w-8 text-muted-foreground mb-2" />
+						<span className="text-muted-foreground">
+							No converted compose data available.
+						</span>
+					</div>
+				) : (
+					<>
+						<div className="flex flex-row gap-2 justify-end">
+							<Button
+								variant="secondary"
+								isLoading={isLoading}
+								onClick={() => {
+									mutateAsync({ composeId })
+										.then(() => {
+											refetch();
+											toast.success("Fetched source type");
+										})
+										.catch((err) => {
+											toast.error("Error fetching source type", {
+												description: err.message,
+											});
+										});
+								}}
+							>
+								Refresh <RefreshCw className="ml-2 h-4 w-4" />
+							</Button>
+						</div>
 
-				<div className="flex flex-row gap-2 justify-end">
-					<Button
-						variant="secondary"
-						isLoading={isLoading}
-						onClick={() => {
-							mutateAsync({ composeId })
-								.then(() => {
-									refetch();
-									toast.success("Fetched source type");
-								})
-								.catch((err) => {
-									toast.error("Error fetching source type", {
-										description: err.message,
-									});
-								});
-						}}
-					>
-						Refresh <RefreshCw className="ml-2 h-4 w-4" />
-					</Button>
-				</div>
-
-				<pre>
-					<CodeEditor
-						value={compose || ""}
-						language="yaml"
-						readOnly
-						height="50rem"
-					/>
-				</pre>
+						<pre>
+							<CodeEditor
+								value={compose || ""}
+								language="yaml"
+								readOnly
+								height="50rem"
+							/>
+						</pre>
+					</>
+				)}
 			</DialogContent>
 		</Dialog>
 	);