adding loader on update profile component

JoinTheAlliance · Mar 14, 2024 · f1651c4 · f1651c4
1 parent 8201700
commit f1651c4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/packages/app/src/components/UserAvatar/index.tsx b/packages/app/src/components/UserAvatar/index.tsx
@@ -1,20 +1,29 @@
-import { Avatar, Group } from "@mantine/core"
+import { Avatar, Group, LoadingOverlay } from "@mantine/core"
 import React from "react"
 
 const UserAvatar = ({
   src,
   online,
-  size = "sm"
+  size = "sm",
+  loading
 }: {
   src: string
   online: boolean
   size?: string
+  loading?: boolean
 }) => {
   return (
     <>
       {size === "lg" ? (
         <Group position="center">
-          <div style={{ position: "relative" }}>
+          <div style={{ position: "relative", cursor: "pointer" }}>
+            <LoadingOverlay
+              // @ts-expect-error
+             visible={loading}
+              zIndex={500}
+              radius="50%"
+              loaderProps={{ color: "green", type: "bars" }}
+            />
             <Avatar
               src={src}
               radius="50%"
@@ -33,14 +42,22 @@ const UserAvatar = ({
                 right: "0",
                 bottom: "0",
                 border: "2px solid white",
-                transform: "translate(-25%, -25%)"
+                transform: "translate(-25%, -25%)",
+                zIndex: "501"
               }}
             />
           </div>
         </Group>
       ) : (
         <Group position="center">
-          <div style={{ position: "relative" }}>
+            <div style={{ position: "relative", cursor: "pointer" }}>
+               <LoadingOverlay
+              // @ts-expect-error
+             visible={loading}
+              zIndex={500}
+              radius="50%"
+              loaderProps={{ color: "green", type: "bars" }}
+            />
             <Avatar src={src} size="md" radius="50%" />
             <div
               style={{
@@ -52,7 +69,8 @@ const UserAvatar = ({
                 right: "0",
                 bottom: "0",
                 border: "1px solid white",
-                transform: "translate(20%, 0%)"
+                  transform: "translate(20%, 0%)",
+                zIndex: "501"
               }}
             />
           </div>

diff --git a/packages/app/src/pages/app/Room/RoomHeader/RoomHeader.tsx b/packages/app/src/pages/app/Room/RoomHeader/RoomHeader.tsx
@@ -13,8 +13,8 @@ const RoomHeader = (): JSX.Element => {
 	const { classes } = useRoomHeaderStyles()
 	const { currentRoom } = useGlobalStore()
 
-	// @ts-nocheck
 	const friend = currentRoom
+	// @ts-expect-error
 		? currentRoom?.roomData?.relationships[0]?.userData2
 		: null
 	const navigate = useNavigate()

diff --git a/packages/app/src/pages/app/UserProfile/index.tsx b/packages/app/src/pages/app/UserProfile/index.tsx
@@ -184,7 +184,7 @@ export default function Profile () {
 				{/* <Paper shadow="xs" radius="lg" p="xl" w={"100%"} mx={"0"}> */}
 				<Container maw={"100%"} p={"xxl"} style={{}}>
 					<div onClick={openImagePicker}>
-						<UserAvatar src={user.avatar_url || ""} online={true} size="lg" />
+						<UserAvatar loading={uploading} src={user.avatar_url || ""} online={true} size="lg" />
 					</div>
 					<Text
 						align="center"
@@ -259,7 +259,7 @@ export default function Profile () {
 									<Select
 										placeholder="He/Him"
 										value={pronouns}
-										onChange={(value) => {
+										onChange={(value: string) => {
 											savePronouns(value!)
 										}}
 										styles={{