From 33057397b022823c988c00d924c1e60d3ad7d44c Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sat, 13 Jan 2024 19:12:02 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Improvements=20to=20page=20skele?=
 =?UTF-8?q?tons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/[locale]/invite/[urlId]/loading.tsx   |  8 +++---
 .../app/[locale]/poll/[urlId]/skeleton.tsx    | 13 +++++-----
 apps/web/src/components/skeleton.tsx          | 25 +++++++++++++++----
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx b/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx
index ea593d339..5bd07e9ea 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx
+++ b/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>
diff --git a/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx b/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
index 8633ebb82..712e9f7f4 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
+++ b/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>
diff --git a/apps/web/src/components/skeleton.tsx b/apps/web/src/components/skeleton.tsx
index 64ba51b8c..1d7d3aa13 100644
--- a/apps/web/src/components/skeleton.tsx
+++ b/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>
+  );
+}