Add skeleton loading states

src/app/[locale]/group/[groupId]/[wishlistId]/page.tsx

@@ -1,12 +1,12 @@
 import { EmptyState } from "@/components/EmptyState"
 import { ItemCard } from "@/components/ItemCard"
-import { Layout } from "@/components/Layout"
 import { List } from "@/components/List"
 import { ListTitle } from "@/components/ListTitle"
 import { NewItem } from "@/components/NewItem"
 import { RemindButton } from "@/components/RemindButton"
 import { WishlistTitle } from "@/components/WishlistTitle"
 import { YourItemCard } from "@/components/YourItemCard"
+import { Separator } from "@/components/ui/separator"
 import { getGroupById } from "@/lib/groups/getGroupById"
 import { canBeRemindedForUser } from "@/lib/reminders"
 import { getWishlistById } from "@/lib/wishlists/getWishlistById"
@@ -73,6 +73,8 @@ export default async function GroupWishlistPage({ params }: Props) {
         </EmptyState>
       )}
 
+      {(wishlist.isOwnList || canBeReminded) && <Separator className="my-3" />}
+
       {wishlist.isOwnList && <NewItem id={wishlist.id} />}
 
       {canBeReminded && !wishlist.isOwnList && (

src/app/[locale]/group/[groupId]/loading.tsx

@@ -0,0 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { List } from "@/components/List"
+import { ListTitle } from "@/components/ListTitle"
+import { Separator } from "@/components/ui/separator"
+
+export default function LoadingWishlist() {
+  return (
+    <List>
+      <ListTitle>
+        <Skeleton className="w-[110px] h-[32px] rounded-md" />
+      </ListTitle>
+
+      <Skeleton className="w-full h-[48px] rounded-md" />
+      <Skeleton className="w-full h-[48px] rounded-md" />
+      <Skeleton className="w-full h-[48px] rounded-md" />
+
+      <Separator className="my-3" />
+
+      <Skeleton className="w-full h-[40px] rounded-md" />
+    </List>
+  )
+}

src/app/[locale]/profile/groups/page.tsx

@@ -2,6 +2,7 @@ import { EmptyState } from "@/components/EmptyState"
 import { List } from "@/components/List"
 import { NewGroup } from "@/components/NewGroup"
 import { YourGroupCard } from "@/components/YourGroupCard"
+import { Separator } from "@/components/ui/separator"
 import { getGroupsForUser } from "@/lib/groups/getGroupsForUser"
 
 export const metadata = {
@@ -12,18 +13,18 @@ export default async function ProfileGroupPage() {
   const groups = await getGroupsForUser()
 
   return (
-    <>
-      <List>
-        {groups.length === 0 && (
-          <EmptyState title="Je volgt nog geen groepen, doe dit snel! 🧐" />
-        )}
+    <List>
+      {groups.length === 0 && (
+        <EmptyState title="Je volgt nog geen groepen, doe dit snel! 🧐" />
+      )}
 
-        {groups.map((group) => (
-          <YourGroupCard key={group.id} group={group} />
-        ))}
-      </List>
+      {groups.map((group) => (
+        <YourGroupCard key={group.id} group={group} />
+      ))}
+
+      <Separator className="my-3" />
 
       <NewGroup />
-    </>
+    </List>
   )
 }

src/app/[locale]/profile/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { List } from "@/components/List"
+import { Separator } from "@/components/ui/separator"
+
+export default function LoadingWishlist() {
+  return (
+    <List>
+      <Skeleton className="w-full h-[48px] rounded-md" />
+      <Skeleton className="w-full h-[48px] rounded-md" />
+
+      <Separator className="my-3" />
+
+      <Skeleton className="w-full h-[40px] rounded-md" />
+    </List>
+  )
+}

src/app/[locale]/profile/page.tsx

@@ -2,6 +2,7 @@ import { EmptyState } from "@/components/EmptyState"
 import { List } from "@/components/List"
 import { NewWishlist } from "@/components/NewWishlist"
 import { YourWishlistCard } from "@/components/YourWishlistCard"
+import { Separator } from "@/components/ui/separator"
 import { getGroupsForUser } from "@/lib/groups/getGroupsForUser"
 import { getWishlistsForUser } from "@/lib/wishlists/getWishlistsForUser"
 
@@ -14,22 +15,22 @@ export default async function ProfilePage() {
   const groups = await getGroupsForUser()
 
   return (
-    <>
-      <List>
-        {wishlists.length === 0 && (
-          <EmptyState title="Je hebt nog geen lijstjes gemaakt, doe dit snel! 🥳" />
-        )}
+    <List>
+      {wishlists.length === 0 && (
+        <EmptyState title="Je hebt nog geen lijstjes gemaakt, doe dit snel! 🥳" />
+      )}
 
-        {wishlists.map((wishlist) => (
-          <YourWishlistCard
-            key={wishlist.id}
-            wishlist={wishlist}
-            groups={groups}
-          />
-        ))}
-      </List>
+      {wishlists.map((wishlist) => (
+        <YourWishlistCard
+          key={wishlist.id}
+          wishlist={wishlist}
+          groups={groups}
+        />
+      ))}
+
+      <Separator className="my-3" />
 
       <NewWishlist groups={groups} />
-    </>
+    </List>
   )
 }

src/app/[locale]/wishlist/[id]/loading.tsx

@@ -0,0 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { List } from "@/components/List"
+import { ListTitle } from "@/components/ListTitle"
+import { Separator } from "@/components/ui/separator"
+
+export default function LoadingWishlist() {
+  return (
+    <List>
+      <ListTitle>
+        <Skeleton className="w-[110px] h-[32px] rounded-md" />
+      </ListTitle>
+
+      <Skeleton className="w-full h-[48px] rounded-md" />
+      <Skeleton className="w-full h-[48px] rounded-md" />
+      <Skeleton className="w-full h-[48px] rounded-md" />
+
+      <Separator className="my-3" />
+
+      <Skeleton className="w-full h-[40px] rounded-md" />
+    </List>
+  )
+}

src/app/[locale]/wishlist/[id]/page.tsx

@@ -6,9 +6,8 @@ import { YourItemCard } from "@/components/YourItemCard"
 import { getWishlistById } from "@/lib/wishlists/getWishlistById"
 import { NewItem } from "@/components/NewItem"
 import { Metadata } from "next"
-import { getServerSession } from "next-auth"
-import { authOptions } from "@/app/[locale]/api/auth/[...nextauth]/route"
 import { notFound } from "next/navigation"
+import { Separator } from "@/components/ui/separator"
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const wishlist = await getWishlistById(params.id, true)
@@ -26,7 +25,6 @@ interface Props {
 
 export default async function WishlistPage({ params }: Props) {
   const wishlist = await getWishlistById(params.id, true)
-  const session = await getServerSession(authOptions)
 
   if (!wishlist) {
     notFound()
@@ -48,6 +46,8 @@ export default async function WishlistPage({ params }: Props) {
         </EmptyState>
       )}
 
+      <Separator className="my-3" />
+
       <NewItem id={wishlist.id} />
     </List>
   )

src/components/NewWishlist/index.tsx

@@ -50,7 +50,7 @@ export const NewWishlist = ({ groups }: Props) => {
           <Plus size="16" className="mr-2" /> Maak een nieuw verlanglijstje aan
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Nieuw verlanglijstje 🤩</DialogTitle>
         </DialogHeader>

src/components/WishlistTitle/index.tsx

@@ -29,7 +29,7 @@ export const WishlistTitle = ({
     <span className={className}>
       {listTitle}{" "}
       {inGroups && (
-        <small className="block text-muted-foreground">
+        <small className="text-muted-foreground">
           in groep{groups.length !== 1 && "en"} {inGroups}
         </small>
       )}

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }