From 7e279a535d1722ce6e32a6b0c4a84b5639d8c859 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Thu, 14 Dec 2023 12:34:15 -0500
Subject: Improve loading states

---
 src/app/groups/recent-group-list.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/app/groups/recent-group-list.tsx')

diff --git a/src/app/groups/recent-group-list.tsx b/src/app/groups/recent-group-list.tsx
index 60e3922..77feaf4 100644
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -2,6 +2,7 @@
 import { getGroupsAction } from '@/app/groups/actions'
 import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
 import { getGroups } from '@/lib/api'
 import { Calendar, Loader2, Users } from 'lucide-react'
 import Link from 'next/link'
@@ -96,9 +97,10 @@ export function RecentGroupList() {
                         </div>
                       </div>
                     ) : (
-                      <>
-                        <Loader2 className="w-3 h-3 mr-1 inline animate-spin" />
-                      </>
+                      <div className="flex justify-between">
+                        <Skeleton className="h-4 w-6 rounded-full" />
+                        <Skeleton className="h-4 w-24 rounded-full" />
+                      </div>
                     )}
                   </div>
                 </div>
-- 
cgit v1.3