Merge pull request #1906 from Dokploy/1888-docker-compose-preview-is-null

feat(ui): add loading state and no data message to converted compose …

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">
+						<pre>
-					<Button
+							<CodeEditor
-						variant="secondary"
+								value={compose || ""}
-						isLoading={isLoading}
+								language="yaml"
-						onClick={() => {
+								readOnly
-							mutateAsync({ composeId })
+								height="50rem"
-								.then(() => {
+							/>
-									refetch();
+						</pre>
-									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>
 			</DialogContent>
 		</Dialog>
 	);