From 3df3d187e4ad3ecde7e870945f02454616a814cf Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 19:41:02 +0100
Subject: [PATCH] feat: added deployment loader & lines count

---
 .../deployments/show-deployment.tsx           | 24 +++++++++++------
 .../deployments/show-deployment-compose.tsx   | 26 +++++++++++++------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 982a7ad6..2d4cbe66 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -8,6 +8,8 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
 import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
 
 interface Props {
 	logPath: string | null;
@@ -84,19 +86,25 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</DialogDescription>
 				</DialogHeader>
 
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
 					<div>
-							{filteredLogs.map((log: LogLine, index: number) => (
-								<TerminalLine
-									key={index}
-									log={log}
-									noTimestamp
-								/>
-							)) || "Loading..."}
+					{ 
+						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine
+								key={index}
+								log={log}
+								noTimestamp
+							/>
+						)) : 
+						(
+							<div className="flex justify-center items-center h-full text-muted-foreground">
+								<Loader2 className="h-6 w-6 animate-spin" />
+							</div>
+						)}
 						<div ref={endOfLogsRef} />
 					</div>
 				</div>
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index eb03f128..702394b6 100644
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -8,6 +8,9 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
 import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
+
 
 interface Props {
 	logPath: string | null;
@@ -91,20 +94,27 @@ export const ShowDeploymentCompose = ({
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+					See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</DialogDescription>
 				</DialogHeader>
 
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
 					<div>
 						
-					{filteredLogs.map((log: LogLine, index: number) => (
-								<TerminalLine
-									key={index}
-									log={log}
-									noTimestamp
-								/>
-							)) || "Loading..."}
+					{ 
+						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine
+								key={index}
+								log={log}
+								noTimestamp
+							/>
+						)) : 
+						(
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+						)
+					}
 						<div ref={endOfLogsRef} />
 					</div>
 				</div>