feat(web-ui): add skeleton to photos page

services/web-ui/public/locales/en/blog-photos.json

@@ -0,0 +1,4 @@
+{
+  "error": "Unable to fetch photos",
+  "no-photos": "No photos has been uploaded yet. Create a blog post to make that happen!"
+}

services/web-ui/public/locales/sv/blog-photos.json

@@ -0,0 +1,4 @@
+{
+  "error": "Kunde inte hämta foton",
+  "no-photos": "Inga foton har laddats upp här än. Skapa en bloggpost för att ladda upp foton."
+}

services/web-ui/src/features/blogs/pages/BlogPhotoListPage/BlogPhotoListPage.container.tsx

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
 
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 import { blogsApi } from "src/apis";
 import { InteractionObserver } from "src/core/infinite-scroll";
@@ -14,6 +15,8 @@ import { BlogPhotoListPageSkeleton } from "./BlogPhotoListPage.skeleton";
 const ITEMS_PER_PAGE = 10;
 
 export function BlogPhotoListPageContainer(): ReactElement {
+  const { t } = useTranslation("blog-photos");
+
   const { error, data, isPending, fetchNextPage, hasNextPage } =
     useInfiniteQuery({
       queryKey: [CacheKeysConstants.BlogPhotoList],
@@ -35,7 +38,7 @@ export function BlogPhotoListPageContainer(): ReactElement {
   if (error) {
     return (
       <BlogPhotoListPageNav>
-        <ErrorView message="Unable to fetch photos" />
+        <ErrorView message={t("error")} />
       </BlogPhotoListPageNav>
     );
   }
@@ -51,7 +54,9 @@ export function BlogPhotoListPageContainer(): ReactElement {
   if (!data || data.pages[0].length === 0) {
     return (
       <BlogPhotoListPageNav>
-        <Typography>No photos to display</Typography>
+        <Box sx={{ p: 2 }}>
+          <Typography>{t("no-photos")}</Typography>
+        </Box>
       </BlogPhotoListPageNav>
     );
   }

services/web-ui/src/features/blogs/pages/BlogPhotoListPage/BlogPhotoListPage.skeleton.tsx

@@ -1,11 +1,38 @@
 import { ReactElement } from "react";
 
-import { Skeleton } from "@mui/material";
+import { Box, Skeleton } from "@mui/material";
+
+const getNumElement = (num: number) => {
+  const arr: number[] = [];
+
+  for (let x = 0; x < num; x++) {
+    arr.push(x);
+  }
+
+  return arr;
+};
 
 export function BlogPhotoListPageSkeleton(): ReactElement {
+  const photos = [3, 1, 4, 2];
+
   return (
     <>
-      <Skeleton />
+      {photos.map((photo, index) => (
+        <Box key={index} sx={{ pt: 3, px: 1 }}>
+          <Skeleton />
+
+          <Box sx={{ display: "flex", gap: 1, pt: 1 }}>
+            {getNumElement(photo).map((v) => (
+              <Skeleton
+                key={index + "" + v}
+                sx={{ height: 100, width: 100 }}
+                variant="rectangular"
+              />
+            ))}
+            <Skeleton variant="rectangular" />
+          </Box>
+        </Box>
+      ))}
     </>
   );
 }

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 = [150, 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>
   );
 }