feat(web-ui): improve skeleton for chat list page

Author: Johan Book

services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.skeleton.tsx

@@ -1,21 +1,30 @@
 import { ReactElement } from "react";
 
-import { List, ListItem, Skeleton } from "@mui/material";
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Skeleton,
+} from "@mui/material";
 
 export function ChatListPageSkeleton(): ReactElement {
+  const items = [140, 75, 180, 140, 80, 90, 130, 210, 70];
+
   return (
     <List>
-      <ListItem divider>
-        <Skeleton height={50} width="100%" />
-      </ListItem>
-
-      <ListItem divider>
-        <Skeleton height={50} width="100%" />
-      </ListItem>
+      {items.map((item) => (
+        <ListItem key={item} disablePadding>
+          <ListItemAvatar>
+            <Skeleton sx={{ height: 38, width: 38 }} variant="circular" />
+          </ListItemAvatar>
 
-      <ListItem divider>
-        <Skeleton height={50} width="100%" />
-      </ListItem>
+          <ListItemText
+            primary={<Skeleton height={30} width={60} />}
+            secondary={<Skeleton height={25} width={item} />}
+          />
+        </ListItem>
+      ))}
     </List>
   );
 }