💄 Improvements to page skeletons

apps/web/src/app/[locale]/invite/[urlId]/loading.tsx

@@ -3,7 +3,7 @@ import {
   PageContent,
   PageHeader,
 } from "@/app/components/page-layout";
-import { Skeleton } from "@/components/skeleton";
+import { Skeleton, SkeletonCard } from "@/components/skeleton";
 
 export default function Loading() {
   return (
@@ -13,10 +13,10 @@ export default function Loading() {
       </PageHeader>
       <PageContent>
         <div className="max-w-4xl mx-auto space-y-6">
-          <Skeleton className="h-72 w-full" />
-          <Skeleton className="h-96 w-full" />
+          <SkeletonCard className="h-72 w-full" />
+          <SkeletonCard className="h-96 w-full" />
           <hr />
-          <Skeleton className="h-64 w-full" />
+          <SkeletonCard className="h-64 w-full" />
         </div>
       </PageContent>
     </PageContainer>

apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx

@@ -3,20 +3,21 @@ import {
   PageContent,
   PageHeader,
 } from "@/app/components/page-layout";
-import { Skeleton } from "@/components/skeleton";
+import { Skeleton, SkeletonCard } from "@/components/skeleton";
 
 export default function Loading() {
   return (
     <PageContainer>
-      <PageHeader>
-        <Skeleton className="w-32 h-9" />
+      <PageHeader className="flex items-center gap-x-4">
+        <Skeleton className="w-9 h-9" />
+        <Skeleton className="w-48 h-5" />
       </PageHeader>
       <PageContent>
         <div className="max-w-4xl mx-auto space-y-6">
-          <Skeleton className="h-72 w-full" />
-          <Skeleton className="h-96 w-full" />
+          <SkeletonCard className="h-72 w-full" />
+          <SkeletonCard className="h-96 w-full" />
           <hr />
-          <Skeleton className="h-64 w-full" />
+          <SkeletonCard className="h-64 w-full" />
         </div>
       </PageContent>
     </PageContainer>

apps/web/src/components/skeleton.tsx

@@ -1,14 +1,29 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import React from "react";
 
-import { PropsWithClassName } from "@/types";
-
-export const Skeleton = (props: PropsWithClassName) => {
+export const Skeleton = (props: {
+  className?: string;
+  children?: React.ReactNode;
+}) => {
   return (
     <div
-      className={clsx("animate-pulse rounded-md bg-gray-200", props.className)}
+      className={cn("animate-pulse rounded-md bg-gray-200", props.className)}
     >
       {props.children}
     </div>
   );
 };
+
+export function SkeletonCard({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("rounded-md bg-white shadow-sm", className)}>
+      {children}
+    </div>
+  );
+}