From 26dc55265dffa8fb35a99e9dc6fc85251fcabb68 Mon Sep 17 00:00:00 2001
From: Johan Book <{ID}+{username}@users.noreply.github.com>
Date: Mon, 15 Jul 2024 22:40:34 +0200
Subject: [PATCH] fix(web-ui): improve chat page styling

---
 .../pages/ChatPage/ChatPage.container.tsx     | 48 +++++++------------
 .../chat/pages/ChatPage/ChatPage.nav.tsx      | 14 ++++--
 .../chat/pages/ChatPage/ChatPage.skeleton.tsx | 27 +++++++++--
 3 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
index eb1ab190..240c93ee 100644
--- a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
+++ b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
@@ -51,48 +51,34 @@ export function ChatPageContainer(): ReactElement {
   if (isLoading) {
     return (
       <ChatPageNav>
-        <ChatPageSkeleton />
+        <Box sx={{ flexGrow: 1 }}>
+          <ChatPageSkeleton />
+        </Box>
+
+        <ChatTextField conversationId={id} onSentMessage={refetch} />
       </ChatPageNav>
     );
   }
 
   if (!data || data.length === 0) {
     return (
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        <ChatPageNav>
-          <Box sx={{ flexGrow: 1 }}>
-            <Typography color="textSecondary">{t("no-messages")}</Typography>
-          </Box>
-
-          <ChatTextField conversationId={id} onSentMessage={refetch} />
-        </ChatPageNav>
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        px: 3,
-        pt: 1
-      }}
-    >
       <ChatPageNav>
         <Box sx={{ flexGrow: 1 }}>
-          <ChatMessageList messages={data} />
+          <Typography color="textSecondary">{t("no-messages")}</Typography>
         </Box>
 
         <ChatTextField conversationId={id} onSentMessage={refetch} />
       </ChatPageNav>
-    </Box>
+    );
+  }
+
+  return (
+    <ChatPageNav>
+      <Box sx={{ flexGrow: 1 }}>
+        <ChatMessageList messages={data} />
+      </Box>
+
+      <ChatTextField conversationId={id} onSentMessage={refetch} />
+    </ChatPageNav>
   );
 }
diff --git a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.nav.tsx b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.nav.tsx
index cd2ff392..a9ccfefd 100644
--- a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.nav.tsx
+++ b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.nav.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import { Link as ReactRouterLink } from "react-router-dom";
 
 import { ArrowBackIosNew } from "@mui/icons-material";
-import { Link as MuiLink, Typography } from "@mui/material";
+import { Box, Link as MuiLink, Typography } from "@mui/material";
 
 import { useTranslation } from "src/core/i18n";
 
@@ -16,7 +16,15 @@ export function ChatPageNav({
   const { t } = useTranslation("chat");
 
   return (
-    <>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        px: 3,
+        pt: 1,
+      }}
+    >
       <MuiLink
         component={ReactRouterLink}
         sx={{
@@ -36,6 +44,6 @@ export function ChatPageNav({
       </Typography>
 
       {children}
-    </>
+    </Box>
   );
 }
diff --git a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.skeleton.tsx b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.skeleton.tsx
index 0cd3c558..a2b8881e 100644
--- a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.skeleton.tsx
+++ b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.skeleton.tsx
@@ -1,11 +1,30 @@
-import React from "react";
+import { ReactElement } from "react";
 
-import { Skeleton } from "@mui/material";
+import { Box, Skeleton } from "@mui/material";
 
-export function ChatPageSkeleton(): React.ReactElement {
+export function ChatPageSkeleton(): ReactElement {
+  const messages = [89, 168, 104, 67, 184, 110, 80];
   return (
     <>
-      <Skeleton />
+      {messages.map((width, index) => (
+        <Box
+          key={width}
+          sx={{
+            display: "flex",
+            justifyContent: index % 2 ? "right" : "left",
+          }}
+        >
+          <Skeleton
+            height={42}
+            sx={{
+              borderRadius: 3,
+              my: 1,
+            }}
+            width={width}
+            variant="rectangular"
+          />
+        </Box>
+      ))}
     </>
   );
 }