feat(UserDetailEditor): loading skeleton

src/components/user/UserSettings.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { UserDetail } from "@boklisten/bl-model";
-import { Card, CircularProgress, Typography } from "@mui/material";
-import { Box } from "@mui/system";
+import { Card } from "@mui/material";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import BlFetcher from "@/api/blFetcher";
 import { getAccessTokenBody } from "@/api/token";
 import UserDetailEditor from "@/components/user/user-detail-editor/UserDetailEditor";
+import UserDetailEditorSkeleton from "@/components/user/user-detail-editor/UserDetailEditorSkeleton";
 import BL_CONFIG from "@/utils/bl-config";
 
 const UserSettings = () => {
@@ -31,22 +31,11 @@ const UserSettings = () => {
 
   return (
     <Card sx={{ paddingBottom: 4 }}>
-      {!userDetails && (
-        <Box
-          sx={{
-            marginTop: 4,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <Typography variant="h5" sx={{ mt: 1 }}>
-            Brukerinnstillinger
-          </Typography>
-          <CircularProgress sx={{ mt: 1 }} />
-        </Box>
+      {userDetails ? (
+        <UserDetailEditor userDetails={userDetails} />
+      ) : (
+        <UserDetailEditorSkeleton />
       )}
-      {userDetails && <UserDetailEditor userDetails={userDetails} />}
     </Card>
   );
 };

src/components/user/user-detail-editor/UserDetailEditorSkeleton.tsx

@@ -0,0 +1,29 @@
+import { Container, Skeleton, Stack, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+
+export default function UserDetailEditorSkeleton({
+  isSignUp,
+}: {
+  isSignUp?: boolean;
+}) {
+  return (
+    <Container component="main" maxWidth="xs">
+      <Stack alignItems={"center"} mt={4}>
+        <Typography variant="h5" sx={{ my: 1 }}>
+          {isSignUp ? "Registrer deg" : "Brukerinnstillinger"}
+        </Typography>
+        <Box width="100%">
+          <Skeleton width={"100%"} height={80} sx={{ mb: 10 }} />
+          {Array.from({ length: 6 }).map((index) => (
+            <Skeleton
+              width={"100%"}
+              height={80}
+              key={`s-${index}`}
+              sx={{ my: -2 }}
+            />
+          ))}
+        </Box>
+      </Stack>
+    </Container>
+  );
+}