The_Great_Archive/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-09-14 11:06:15 +05:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: remove DnsPageTransition component and update loading indicators in DNS-related components

Browse Source
This commit is contained in:
Mauricio Siu 2026-09-01 02:36:41 -06:00
parent 1ab4a8a70a
commit f1a4f4317a
8 changed files with 20 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/dokploy/components/dashboard/settings/dns/dns-page-transition.tsx
View File

@ -1,32 +0,0 @@
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
let lastDepth: number | null = null;
const depthOf = (path: string) =>
path.split("?")[0]!.split("/").filter(Boolean).length;
export const DnsPageTransition = ({
children,
}: {
children: React.ReactNode;
}) => {
const { asPath } = useRouter();
const depth = depthOf(asPath);
const [direction] = useState(() =>
lastDepth !== null && depth < lastDepth ? "back" : "forward",
);
useEffect(() => {
lastDepth = depth;
}, [depth]);
return (
<div
data-direction={direction}
className="t-page-enter flex w-full flex-col gap-4"
>
{children}
</div>
);
};

12
apps/dokploy/components/dashboard/settings/dns/show-dns-providers.tsx
View File

@ -1,4 +1,4 @@
import { EyeIcon, Globe, Trash2 } from "lucide-react";
import { EyeIcon, Globe, Loader2, Trash2 } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { toast } from "sonner";
@ -12,7 +12,6 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
@ -33,7 +32,7 @@ export const ShowDnsProviders = () => {
const { data: permissions } = api.user.getPermissions.useQuery();
return (
<div className="w-full">
<div className="w-full max-w-5xl mx-auto">
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
<div className="rounded-xl bg-background shadow-md">
<div className="flex flex-wrap items-center justify-between gap-4 p-6">
@ -52,10 +51,9 @@ export const ShowDnsProviders = () => {
<CardContent className="flex min-h-[60vh] flex-col gap-4 border-t py-8">
{isPending ? (
<div className="flex flex-col gap-2">
{[0, 1, 2].map((row) => (
<Skeleton key={row} className="h-[68px] w-full rounded-lg" />
))}
<div className="flex flex-1 flex-row items-center justify-center gap-2 text-sm text-muted-foreground">
<span>Loading...</span>
<Loader2 className="animate-spin size-4" />
</div>
) : data?.length === 0 ? (
<div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">

9
apps/dokploy/components/dashboard/settings/dns/show-dns-records.tsx
View File

@ -14,6 +14,7 @@ import {
Cloud,
CloudOff,
ListTree,
Loader2,
PenBoxIcon,
PlusIcon,
Search,
@ -40,7 +41,6 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
@ -319,7 +319,7 @@ export const ShowDnsRecords = ({ dnsProviderId, zoneId }: Props) => {
});
return (
<div className="w-full">
<div className="w-full ">
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
<div className="rounded-xl bg-background shadow-md">
<div className="flex flex-wrap items-center justify-between gap-4 p-6">
@ -358,7 +358,10 @@ export const ShowDnsRecords = ({ dnsProviderId, zoneId }: Props) => {
<div className="flex flex-col-reverse gap-4 lg:flex-row lg:items-start">
<div className="flex min-w-0 flex-1 flex-col gap-4">
{isPending ? (
<Skeleton className="h-[420px] w-full rounded-lg" />
<div className="flex min-h-[45vh] flex-row items-center justify-center gap-2 text-sm text-muted-foreground">
<span>Loading...</span>
<Loader2 className="animate-spin size-4" />
</div>
) : data?.length === 0 ? (
<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
<div className="rounded-full bg-muted p-4">

14
apps/dokploy/components/dashboard/settings/dns/show-dns-zones.tsx
View File

@ -1,4 +1,4 @@
import { ArrowLeft, Globe } from "lucide-react";
import { ArrowLeft, Globe, Loader2 } from "lucide-react";
import Link from "next/link";
import { AlertBlock } from "@/components/shared/alert-block";
import { Button } from "@/components/ui/button";
@ -9,7 +9,6 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { api } from "@/utils/api";
interface Props {
@ -29,7 +28,7 @@ const RecordCount = ({
});
if (isPending) {
return <Skeleton className="h-4 w-20 rounded-full" />;
return <Loader2 className="animate-spin size-4 text-muted-foreground" />;
}
if (isError) {
@ -53,7 +52,7 @@ export const ShowDnsZones = ({ dnsProviderId }: Props) => {
api.dnsProvider.listZones.useQuery({ dnsProviderId });
return (
<div className="w-full">
<div className="w-full max-w-5xl mx-auto">
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
<div className="rounded-xl bg-background shadow-md">
<div className="flex flex-wrap items-center justify-between gap-4 p-6">
@ -79,10 +78,9 @@ export const ShowDnsZones = ({ dnsProviderId }: Props) => {
<CardContent className="flex min-h-[60vh] flex-col gap-4 border-t py-8">
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
{isPending ? (
<div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4">
{[0, 1, 2, 3, 4, 5].map((card) => (
<Skeleton key={card} className="h-[124px] rounded-xl" />
))}
<div className="flex flex-1 flex-row items-center justify-center gap-2 text-sm text-muted-foreground">
<span>Loading...</span>
<Loader2 className="animate-spin size-4" />
</div>
) : data?.length === 0 ? (
<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">

7
apps/dokploy/pages/dashboard/settings/dns.tsx
View File

@ -3,17 +3,12 @@ import { createServerSideHelpers } from "@trpc/react-query/server";
import type { GetServerSidePropsContext } from "next";
import type { ReactElement } from "react";
import superjson from "superjson";
import { DnsPageTransition } from "@/components/dashboard/settings/dns/dns-page-transition";
import { ShowDnsProviders } from "@/components/dashboard/settings/dns/show-dns-providers";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { appRouter } from "@/server/api/root";
const Page = () => {
return (
<DnsPageTransition>
<ShowDnsProviders />
</DnsPageTransition>
);
return <ShowDnsProviders />;
};
export default Page;

7
apps/dokploy/pages/dashboard/settings/dns/[dnsProviderId].tsx
View File

@ -3,7 +3,6 @@ import { createServerSideHelpers } from "@trpc/react-query/server";
import type { GetServerSidePropsContext } from "next";
import type { ReactElement } from "react";
import superjson from "superjson";
import { DnsPageTransition } from "@/components/dashboard/settings/dns/dns-page-transition";
import { ShowDnsZones } from "@/components/dashboard/settings/dns/show-dns-zones";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { appRouter } from "@/server/api/root";
@ -13,11 +12,7 @@ interface Props {
}
const Page = ({ dnsProviderId }: Props) => {
return (
<DnsPageTransition>
<ShowDnsZones dnsProviderId={dnsProviderId} />
</DnsPageTransition>
);
return <ShowDnsZones dnsProviderId={dnsProviderId} />;
};
export default Page;

7
apps/dokploy/pages/dashboard/settings/dns/[dnsProviderId]/[zoneId].tsx
View File

@ -3,7 +3,6 @@ import { createServerSideHelpers } from "@trpc/react-query/server";
import type { GetServerSidePropsContext } from "next";
import type { ReactElement } from "react";
import superjson from "superjson";
import { DnsPageTransition } from "@/components/dashboard/settings/dns/dns-page-transition";
import { ShowDnsRecords } from "@/components/dashboard/settings/dns/show-dns-records";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { appRouter } from "@/server/api/root";
@ -14,11 +13,7 @@ interface Props {
}
const Page = ({ dnsProviderId, zoneId }: Props) => {
return (
<DnsPageTransition>
<ShowDnsRecords dnsProviderId={dnsProviderId} zoneId={zoneId} />
</DnsPageTransition>
);
return <ShowDnsRecords dnsProviderId={dnsProviderId} zoneId={zoneId} />;
};
export default Page;

1
packages/server/src/utils/process/execAsync.ts
View File

@ -75,7 +75,6 @@ export const execAsyncStream = (
command,
stdout: stdoutComplete,
stderr: stderrComplete,
// @ts-expect-error
exitCode: error.code,
originalError: error,
}),