From f6af5daf5e70d8a8099bfa3ab89eb8b51c64daf7 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Sun, 8 Feb 2026 02:26:49 -0600
Subject: [PATCH] refactor(animation): update whale-loader animations and
 styles

- Removed the deprecated "whale-draw" animation from the Tailwind CSS configuration.
- Added a new "whale-draw" keyframe animation in globals.css to enhance the whale-loader's visual effect.
- Updated the WhaleLoader component to utilize the new animation and adjusted stroke properties for improved rendering.
---
 .../components/shared/whale-loader.tsx        | 18 ++++++++++----
 apps/dokploy/styles/globals.css               | 24 +++++++++++++++++++
 apps/dokploy/tailwind.config.ts               |  5 ----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/apps/dokploy/components/shared/whale-loader.tsx b/apps/dokploy/components/shared/whale-loader.tsx
index 0a88d9825..88b443c44 100644
--- a/apps/dokploy/components/shared/whale-loader.tsx
+++ b/apps/dokploy/components/shared/whale-loader.tsx
@@ -14,24 +14,34 @@ interface WhaleLoaderProps {
 export const WhaleLoader = ({ className }: WhaleLoaderProps) => {
 	return (
 		<div
-			className={cn("flex flex-col items-center justify-center gap-3", className)}
+			className={cn(
+				"flex flex-col items-center justify-center gap-3",
+				className,
+			)}
 			aria-label="Loading"
 		>
-			<div className="animate-whale-tide">
+			{/* animate-whale-tide */}
+			<div className="">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 559 446"
 					className="size-20 text-primary"
 					aria-hidden
 				>
-					<g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+					<g
+						fill="currentColor"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
 						{WHALE_PATHS.map((d, i) => (
 							<path
 								key={i}
 								pathLength={1}
 								strokeDasharray={1}
 								strokeDashoffset={1}
-								className="animate-whale-draw [stroke-dashoffset:1]"
+								className="animate-whale-draw"
 								style={{
 									animationDelay: `${i * 0.25}s`,
 								}}
diff --git a/apps/dokploy/styles/globals.css b/apps/dokploy/styles/globals.css
index 8bd768e1a..b5be0ae75 100644
--- a/apps/dokploy/styles/globals.css
+++ b/apps/dokploy/styles/globals.css
@@ -201,6 +201,30 @@
 .animate-heartbeat {
 	animation: heartbeat 2.5s infinite;
 }
+
+@keyframes whale-draw {
+	0% {
+		stroke-dashoffset: 1;
+		fill-opacity: 0;
+	}
+	45% {
+		stroke-dashoffset: 0;
+		fill-opacity: 1;
+	}
+	55% {
+		stroke-dashoffset: 0;
+		fill-opacity: 1;
+	}
+	100% {
+		stroke-dashoffset: 1;
+		fill-opacity: 0;
+	}
+}
+
+.animate-whale-draw {
+	animation: whale-draw 2.8s ease-in-out infinite;
+}
+
 @media (prefers-color-scheme: dark) {
 	.swagger-ui {
 		background-color: white;
diff --git a/apps/dokploy/tailwind.config.ts b/apps/dokploy/tailwind.config.ts
index fcf8ea69a..0758a8a38 100644
--- a/apps/dokploy/tailwind.config.ts
+++ b/apps/dokploy/tailwind.config.ts
@@ -110,17 +110,12 @@ const config = {
 					"0%, 100%": { transform: "translateY(0)" },
 					"50%": { transform: "translateY(-8px)" },
 				},
-				"whale-draw": {
-					from: { strokeDashoffset: "1" },
-					to: { strokeDashoffset: "0" },
-				},
 			},
 			animation: {
 				"caret-blink": "caret-blink 1.25s ease-out infinite",
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",
 				"whale-tide": "whale-tide 2.2s ease-in-out infinite",
-				"whale-draw": "whale-draw 1.8s ease-out forwards",
 			},
 		},
 	},