nicolabs/mosh-helpdesk
1
0
Fork 0
mirror of https://github.com/mosh-hamedani/helpdesk.git synced 2026-05-21 11:58:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add loading skeletons

Browse source
This commit is contained in:
Moshfegh Hamedani 2026-02-16 10:51:39 -08:00
parent 1cf3508fcb
commit d7afeb456f
3 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Layout.tsx
View file

@ -14,7 +14,7 @@ export default function Layout() {
<div className="min-h-screen flex flex-col">
<nav className="flex items-center justify-between bg-background border-b px-6 h-14">
<div className="flex items-center gap-6">
<span className="text-lg font-bold">Helpdesk</span>
<Link to="/" className="text-lg font-bold hover:text-foreground transition-colors">Helpdesk</Link>
{session?.user?.role === "admin" && (
<Link to="/users" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
Users

13
client/src/components/ui/skeleton.tsx Normal file
View file

@ -0,0 +1,13 @@
import { cn } from "@/lib/utils"
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn("bg-accent animate-pulse rounded-md", className)}
{...props}
/>
)
}
export { Skeleton }

28
client/src/pages/UsersPage.tsx
View file

@ -10,7 +10,8 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { AlertCircle, Loader2 } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { AlertCircle } from "lucide-react";
interface User {
id: string;
@ -31,9 +32,28 @@ export default function UsersPage() {
if (isLoading) {
return (
<div className="flex items-center justify-center h-64 text-muted-foreground">
<Loader2 className="animate-spin mr-2 h-5 w-5" />
Loading...
<div>
<h1 className="text-2xl font-bold mb-6">Users</h1>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Role</TableHead>
<TableHead>Created</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
<TableCell><Skeleton className="h-4 w-24" /></TableCell>
<TableCell><Skeleton className="h-4 w-40" /></TableCell>
<TableCell><Skeleton className="h-5 w-14 rounded-full" /></TableCell>
<TableCell><Skeleton className="h-4 w-24" /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}