feat: add loader to enhance ux/ui

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -46,7 +46,7 @@ export const ShowServers = () => {
 
 	return (
 		<div className="p-6 space-y-6">
-			{query?.success && <WelcomeSuscription />}
+			{query?.success && isCloud && <WelcomeSuscription />}
 			<div className="space-y-2 flex flex-row justify-between items-end">
 				<div className="flex flex-col gap-2">
 					<div>

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx

@@ -50,7 +50,7 @@ export const CreateSSHKey = () => {
 		<Card className="h-full bg-transparent">
 			<CardContent>
 				<div className="grid w-full gap-4 pt-4">
-					{isLoading ? (
+					{isLoading || !cloudSSHKey ? (
 						<div className="min-h-[25vh] justify-center flex items-center gap-4">
 							<Loader2
 								className="animate-spin text-muted-foreground"

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx

@@ -55,7 +55,7 @@ export const Setup = () => {
 			<Card className="bg-background">
 				<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
 					<div className="flex flex-col gap-2 w-full">
-						<Label>Select a server</Label>
+						<Label>Select the server and click on setup server</Label>
 						<Select onValueChange={setServerId} defaultValue={serverId}>
 							<SelectTrigger>
 								<SelectValue placeholder="Select a server" />

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx

@@ -18,23 +18,11 @@ import { CreateServer } from "./create-server";
 import { CreateSSHKey } from "./create-ssh-key";
 import { Setup } from "./setup";
 import { Verify } from "./verify";
-import {
+import { Database, Globe, GitMerge, Users, Code2, Plug } from "lucide-react";
-	Database,
-	Globe,
-	GitMerge,
-	Code,
-	Users,
-	Code2,
-	Plug,
-} from "lucide-react";
 import ConfettiExplosion from "react-confetti-explosion";
 import Link from "next/link";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 
-interface Props {
-	children?: React.ReactNode;
-}
-
 export const { useStepper, steps, Scoped } = defineStepper(
 	{
 		id: "requisites",
@@ -56,7 +44,7 @@ export const { useStepper, steps, Scoped } = defineStepper(
 	{ id: "complete", title: "Complete", description: "Checkout complete" },
 );
 
-export const WelcomeSuscription = ({ children }: Props) => {
+export const WelcomeSuscription = () => {
 	const [showConfetti, setShowConfetti] = useState(false);
 	const stepper = useStepper();
 	const [isOpen, setIsOpen] = useState(true);
@@ -92,9 +80,10 @@ export const WelcomeSuscription = ({ children }: Props) => {
 					<DialogTitle className="text-2xl text-center">
 						Welcome To Dokploy Cloud 🎉
 					</DialogTitle>
-					<DialogDescription className="text-center">
+					<DialogDescription className="text-center max-w-xl mx-auto">
-						Thank you for choosing Dokploy Cloud, before you start you need to
+						Thank you for choosing Dokploy Cloud! 🚀 We're excited to have you
-						configure your remote server
+						onboard. Before you dive in, you'll need to configure your remote
+						server to unlock all the features we offer.
 					</DialogDescription>
 				</DialogHeader>
 				<div className="grid gap-4">
@@ -120,9 +109,7 @@ export const WelcomeSuscription = ({ children }: Props) => {
 												type="button"
 												role="tab"
 												variant={
-													index <= stepper.current.index
+													index <= stepper.current.index ? "secondary" : "ghost"
-														? "default"
-														: "secondary"
 												}
 												aria-current={
 													stepper.current.id === step.id ? "step" : undefined
@@ -130,7 +117,7 @@ export const WelcomeSuscription = ({ children }: Props) => {
 												aria-posinset={index + 1}
 												aria-setsize={steps.length}
 												aria-selected={stepper.current.id === step.id}
-												className="flex size-10 items-center justify-center rounded-full"
+												className="flex size-10 items-center justify-center rounded-full border-2 border-border"
 												onClick={() => stepper.goTo(step.id)}
 											>
 												{index + 1}