Big Updated, added some tests, added comments for all functions, I forgot the rest

apps/web/src/components/sidebar.tsx

@@ -1,11 +1,33 @@
 import { useStorage } from "@tensamin/storage/context";
 import Wrapper from "@tensamin/user/wrapper";
+import { type User } from "@tensamin/user/context";
 import * as React from "react";
-import Basic from "./modals/basic";
+import { Basic, Loading } from "./modals/basic";
 import List from "@/features/conversation/list/body";
 
+/**
+ * Renders sidebar user summary content for the current user.
+ * @param user Loaded user data.
+ * @returns Sidebar user card JSX.
+ */
+function renderSidebarUser(user: User): React.ReactNode {
+  return <Basic user={user} />;
+}
+
+/**
+ * Renders sidebar user summary content skeleton while loading user data.
+ * @returns Sidebar user card skeleton JSX.
+ */
+function renderSidebarUserLoading(): React.ReactNode {
+  return <Loading />;
+}
+
+/**
+ * Renders the conversation sidebar with account summary and conversation list.
+ * @returns Sidebar JSX.
+ */
 export default function Sidebar() {
-  const [userId, setUserId] = React.useState(0);
+  const [userId, setUserId] = React.useState<undefined | number>(undefined);
   const { load } = useStorage();
 
   React.useEffect(() => {
@@ -14,9 +36,11 @@ export default function Sidebar() {
 
   return (
     <div className="w-75 h-full flex flex-col gap-3 p-2">
-      {userId !== 0 && (
-        <Wrapper userId={userId} component={(user) => <Basic user={user} />} />
-      )}
+      <Wrapper
+        loading={renderSidebarUserLoading()}
+        userId={userId}
+        component={renderSidebarUser}
+      />
       <div className="h-full">
         <List />
       </div>