asepharyana
d5a547eb25
Deploy to VPS / deploy (push) Failing after 1m45s
- Implemented AppHeader component with theme toggle and connection status. - Created AppSidebar component for navigation with connection status indicator. - Added MobileNav component for mobile navigation with responsive design. - Introduced shared components: DetailStat, EmptyState, ErrorState, LoadingSkeleton, and StatCard for consistent UI. - Developed hooks for async data fetching: useAsync, useConfig, useDashboard, useGuilds, useMedia, useMessages, useRecordings, and useVoice. - Added chatbot API functions for sending messages and managing chat history.
39 lines
873 B
TypeScript
39 lines
873 B
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface LoadingSkeletonProps {
|
|
/** Number of skeleton rows */
|
|
count?: number;
|
|
/** Height per skeleton row */
|
|
height?: string;
|
|
/** Grid layout: columns */
|
|
columns?: number;
|
|
/** Additional classes */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Consistent loading skeleton for data-fetching pages.
|
|
* Renders a grid of skeleton placeholders.
|
|
*/
|
|
export function LoadingSkeleton({
|
|
count = 4,
|
|
height = "h-28",
|
|
columns = 1,
|
|
className,
|
|
}: LoadingSkeletonProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"grid gap-3",
|
|
columns > 1 ? `grid-cols-1 md:grid-cols-${columns}` : "grid-cols-1",
|
|
className,
|
|
)}
|
|
>
|
|
{Array.from({ length: count }, (_, i) => (
|
|
<Skeleton key={i} className={cn(height, "rounded-xl")} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|