From 3df1456c40240d01d1887c7ba3c55dc8e48b4eb2 Mon Sep 17 00:00:00 2001
From: Sosokker <sirinza29@gmail.com>
Date: Wed, 12 Mar 2025 15:26:19 +0700
Subject: [PATCH] ui: show skeleton instead of loading message

---
 frontend/components/sidebar/app-sidebar.tsx | 36 ++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/components/sidebar/app-sidebar.tsx b/frontend/components/sidebar/app-sidebar.tsx
index 678b27f..5bdcf40 100644
--- a/frontend/components/sidebar/app-sidebar.tsx
+++ b/frontend/components/sidebar/app-sidebar.tsx
@@ -7,7 +7,6 @@ import {
   BookOpen,
   Bot,
   Command,
-  Frame,
   GalleryVerticalEnd,
   Map,
   PieChart,
@@ -47,6 +46,29 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   config?: SidebarConfig;
 }
 
+function UserSkeleton() {
+  return (
+    <div className="flex items-center space-x-2 animate-pulse">
+      <div className="w-8 h-8 bg-gray-300 rounded-full" />
+      <div className="w-24 h-4 bg-gray-300 rounded" />
+    </div>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function UserErrorFallback({ message }: { message: string }) {
+  return (
+    <div className="flex items-center space-x-2">
+      <div className="w-8 h-8 bg-red-300 rounded-full flex items-center justify-center">
+        <span role="img" aria-label="error">
+          ⚠️
+        </span>
+      </div>
+      <div className="text-sm text-red-600">Failed to load user</div>
+    </div>
+  );
+}
+
 export function AppSidebar({ config, ...props }: AppSidebarProps) {
   const defaultConfig: SidebarConfig = {
     teams: [
@@ -90,8 +112,12 @@ export function AppSidebar({ config, ...props }: AppSidebarProps) {
           email: data.user.Email,
           avatar: data.user.Avatar || "/avatars/avatar.webp",
         });
-      } catch (err: any) {
-        setError(err.message);
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError("An unexpected error occurred");
+        }
       } finally {
         setLoading(false);
       }
@@ -110,7 +136,9 @@ export function AppSidebar({ config, ...props }: AppSidebarProps) {
           <NavCrops crops={sidebarConfig.crops} />
         </div>
       </SidebarContent>
-      <SidebarFooter>{loading ? "Loading..." : error ? error : <NavUser user={user} />}</SidebarFooter>
+      <SidebarFooter>
+        {loading ? <UserSkeleton /> : error ? <UserErrorFallback message={error} /> : <NavUser user={user} />}
+      </SidebarFooter>
       <SidebarRail />
     </Sidebar>
   );