Add complete production-ready Ysterbaard PocketBase registry browser frontend: - Next.js 14 App Router with TypeScript, Tailwind CSS, and TanStack React Query - Secure server-side PocketBase API proxy to avoid exposing superuser tokens - Read-only directors and companies registry browse pages with search, filtering, and pagination - Client onboarding workflow for creating and managing client submissions - Docker container configuration for easy deployment - All supporting UI components, utility functions, and configuration files
28 lines
709 B
TypeScript
28 lines
709 B
TypeScript
// components/Skeleton.tsx
|
|
// Lightweight shimmer placeholder. Used while server components
|
|
// stream in the initial paint, and inside client explorers while
|
|
// TanStack Query is fetching subsequent pages.
|
|
|
|
interface SkeletonProps {
|
|
className?: string;
|
|
}
|
|
|
|
export default function Skeleton({ className = "" }: SkeletonProps) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={
|
|
"relative overflow-hidden bg-surface-warm rounded-md " +
|
|
className
|
|
}
|
|
>
|
|
<span
|
|
className="absolute inset-0 animate-pulse"
|
|
style={{
|
|
background:
|
|
"linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent)"
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|