refactor(client): optimize suspense components

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/src/components/nav-user.tsx

@@ -24,8 +24,10 @@ import {
 } from '@/components/ui/sidebar';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
 import { useLogout } from '@/hooks/useLogout';
+import { withFallback } from './hoc/with-fallback';
+import { Skeleton } from './ui/skeleton';
 
-export function NavUser() {
+function NavUser_() {
   const { isMobile } = useSidebar();
   const { data: user } = useUserInfo();
   const { logout } = useLogout();
@@ -83,3 +85,20 @@ export function NavUser() {
     </SidebarMenu>
   );
 }
+
+function NavUserSkeleton() {
+  return (
+    <SidebarMenuButton
+      size="lg"
+    >
+      <Skeleton className="h-8 w-8 rounded-lg" />
+      <div className="flex flex-col flex-1 gap-1">
+        <Skeleton className="h-3 w-16" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+      <IconDotsVertical className="ml-auto size-4" />
+    </SidebarMenuButton>
+  );
+}
+
+export const NavUser = withFallback(NavUser_, <NavUserSkeleton />);