Skip to content

Standardize empty/loading states and improve a11y in dashboard UI #3514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mhbdev wants to merge 6 commits into
base: canary
Choose a base branch
from
Open

Standardize empty/loading states and improve a11y in dashboard UI #3514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e9ff114
Made the password visibility and generator controls keyboard-accessib…
mhbdev Jan 24, 2026
4196132
Updated the onboarding social icon links to avoid nested interactive …
mhbdev Jan 24, 2026
8b90ce4
Standardized loading and empty states with the shadcn Empty compositi…
mhbdev Jan 24, 2026
5f644da
Standardized the remaining loading/empty states by introducing a shar…
mhbdev Jan 24, 2026
7039154
Code Format
mhbdev Jan 24, 2026
7c9a98b
Added missing Loader2 imports to fix the typecheck errors.
mhbdev Jan 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 24 additions & 11 deletions apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { File, Loader2 } from "lucide-react";
import { File } from "lucide-react";
import { CodeEditor } from "@/components/shared/code-editor";
import {
Card,
Expand All @@ -7,6 +7,14 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
import { Skeleton } from "@/components/ui/skeleton";
import { api } from "@/utils/api";
import { UpdateTraefikConfig } from "./update-traefik-config";

Expand Down Expand Up @@ -36,17 +44,22 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
</CardHeader>
<CardContent className="flex flex-col gap-4">
{isLoading ? (
<span className="text-base text-muted-foreground flex flex-row gap-3 items-center justify-center min-h-[10vh]">
Loading...
<Loader2 className="animate-spin" />
</span>
) : !data ? (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<File className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
No traefik config detected
</span>
<div className="flex flex-col gap-3 min-h-[10vh]">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-32 w-full" />
</div>
) : !data ? (
<Empty className="min-h-[10vh]">
<EmptyHeader>
<EmptyMedia variant="icon">
<File className="size-5 text-muted-foreground" />
</EmptyMedia>
<EmptyTitle>No Traefik config detected</EmptyTitle>
<EmptyDescription>
Add a configuration file to manage custom rules.
</EmptyDescription>
</EmptyHeader>
</Empty>
) : (
<div className="flex flex-col pt-2 relative">
<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
Expand Down
37 changes: 24 additions & 13 deletions apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import {
ChevronDown,
ChevronUp,
Clock,
Loader2,
RefreshCcw,
RocketIcon,
Settings,
Expand All @@ -22,6 +21,14 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
import { ListSkeleton } from "@/components/shared/list-skeleton";
import { api, type RouterOutputs } from "@/utils/api";
import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
import { CancelQueues } from "./cancel-queues";
Expand Down Expand Up @@ -231,19 +238,23 @@ export const ShowDeployments = ({
)}

{isLoadingDeployments ? (
<div className="flex w-full flex-row items-center justify-center gap-3 pt-10 min-h-[25vh]">
<Loader2 className="size-6 text-muted-foreground animate-spin" />
<span className="text-base text-muted-foreground">
Loading deployments...
</span>
</div>
<ListSkeleton
items={3}
gridClassName="grid grid-cols-1 gap-3"
className="pt-6"
/>
) : deployments?.length === 0 ? (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10 min-h-[25vh]">
<RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
No deployments found
</span>
</div>
<Empty className="min-h-[25vh] pt-6">
<EmptyHeader>
<EmptyMedia variant="icon">
<RocketIcon className="size-5 text-muted-foreground" />
</EmptyMedia>
<EmptyTitle>No deployments yet</EmptyTitle>
<EmptyDescription>
Your deployment history will show up here once you deploy.
</EmptyDescription>
</EmptyHeader>
</Empty>
) : (
<div className="flex flex-col gap-4">
{deployments?.map((deployment, index) => {
Expand Down
42 changes: 27 additions & 15 deletions apps/dokploy/components/dashboard/application/domains/show-domains.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import Link from "next/link";
import { useState } from "react";
import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action";
import { ListSkeleton } from "@/components/shared/list-skeleton";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Expand All @@ -23,6 +24,14 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
import {
Tooltip,
TooltipContent,
Expand Down Expand Up @@ -160,27 +169,30 @@ export const ShowDomains = ({ id, type }: Props) => {
</CardHeader>
<CardContent className="flex w-full flex-row gap-4">
{isLoadingDomains ? (
<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
<span className="text-base text-muted-foreground">
Loading domains...
</span>
</div>
<ListSkeleton
items={4}
gridClassName="grid grid-cols-1 xl:grid-cols-2 gap-4 w-full"
className="min-h-[40vh]"
/>
) : data?.length === 0 ? (
<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[40vh]">
<GlobeIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
To access the application it is required to set at least 1
domain
</span>
<div className="flex flex-row gap-4 flex-wrap">
<Empty className="min-h-[40vh] w-full">
<EmptyHeader>
<EmptyMedia variant="icon">
<GlobeIcon className="size-5 text-muted-foreground" />
</EmptyMedia>
<EmptyTitle>No domains yet</EmptyTitle>
<EmptyDescription>
Add at least one domain to access your application.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<AddDomain id={id} type={type}>
<Button>
<GlobeIcon className="size-4" /> Add Domain
</Button>
</AddDomain>
</div>
</div>
</EmptyContent>
</Empty>
) : (
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
{data?.map((item) => {
Expand Down
55 changes: 35 additions & 20 deletions apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import { toast } from "sonner";
import { z } from "zod";
import { BitbucketIcon } from "@/components/icons/data-tools-icons";
import { AlertBlock } from "@/components/shared/alert-block";
import { ListSkeleton } from "@/components/shared/list-skeleton";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
Command,
CommandEmpty,
Expand Down Expand Up @@ -237,13 +239,15 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
{isLoadingRepositories ? (
<Skeleton className="h-4 w-28" />
) : field.value.owner ? (
repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
) : (
"Select repository"
)}

<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
Expand All @@ -256,9 +260,13 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
className="h-9"
/>
{isLoadingRepositories && (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
<div className="p-4">
<ListSkeleton
items={4}
gridClassName="grid grid-cols-1 gap-2"
itemClassName="border-none bg-transparent p-0"
/>
</div>
)}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
Expand Down Expand Up @@ -320,13 +328,16 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{status === "loading" && fetchStatus === "fetching"
? "Loading...."
: field.value
? branches?.find(
(branch) => branch.name === field.value,
)?.name
: "Select branch"}
{status === "loading" &&
fetchStatus === "fetching" ? (
<Skeleton className="h-4 w-24" />
) : field.value ? (
branches?.find(
(branch) => branch.name === field.value,
)?.name
) : (
"Select branch"
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
Expand All @@ -338,9 +349,13 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
className="h-9"
/>
{status === "loading" && fetchStatus === "fetching" && (
<span className="py-6 text-center text-sm text-muted-foreground">
Loading Branches....
</span>
<div className="p-4">
<ListSkeleton
items={4}
gridClassName="grid grid-cols-1 gap-2"
itemClassName="border-none bg-transparent p-0"
/>
</div>
)}
{!repository?.owner && (
<span className="py-6 text-center text-sm text-muted-foreground">
Expand Down
59 changes: 37 additions & 22 deletions apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import { toast } from "sonner";
import { z } from "zod";
import { GiteaIcon } from "@/components/icons/data-tools-icons";
import { AlertBlock } from "@/components/shared/alert-block";
import { ListSkeleton } from "@/components/shared/list-skeleton";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
Command,
CommandEmpty,
Expand Down Expand Up @@ -258,14 +260,16 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
(repo: GiteaRepository) =>
repo.name === field.value.repo,
)?.name
: "Select repository"}
{isLoadingRepositories ? (
<Skeleton className="h-4 w-28" />
) : field.value.owner ? (
repositories?.find(
(repo: GiteaRepository) =>
repo.name === field.value.repo,
)?.name
) : (
"Select repository"
)}

<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
Expand All @@ -278,9 +282,13 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
className="h-9"
/>
{isLoadingRepositories && (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
<div className="p-4">
<ListSkeleton
items={4}
gridClassName="grid grid-cols-1 gap-2"
itemClassName="border-none bg-transparent p-0"
/>
</div>
)}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
Expand Down Expand Up @@ -349,14 +357,17 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{status === "loading" && fetchStatus === "fetching"
? "Loading...."
: field.value
? branches?.find(
(branch: GiteaBranch) =>
branch.name === field.value,
)?.name
: "Select branch"}
{status === "loading" &&
fetchStatus === "fetching" ? (
<Skeleton className="h-4 w-24" />
) : field.value ? (
branches?.find(
(branch: GiteaBranch) =>
branch.name === field.value,
)?.name
) : (
"Select branch"
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
Expand All @@ -368,9 +379,13 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
className="h-9"
/>
{status === "loading" && fetchStatus === "fetching" && (
<span className="py-6 text-center text-sm text-muted-foreground">
Loading Branches....
</span>
<div className="p-4">
<ListSkeleton
items={4}
gridClassName="grid grid-cols-1 gap-2"
itemClassName="border-none bg-transparent p-0"
/>
</div>
)}
{!repository?.owner && (
<span className="py-6 text-center text-sm text-muted-foreground">
Expand Down
Loading