Fix : Avatar

Deskripsi:
- Ubah avatar yang image nya di ambil dari storage wibu server
- Avatar forum
- Avatra job
- Avatar Investasi
- Avatar donasi
## No Issuee

src/app_modules/katalog/profile/_component/comp_load_avatar.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { pathAssetImage } from "@/app/lib";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { AccentColor } from "@/app_modules/_global/color";
-import { Avatar, Image, Skeleton } from "@mantine/core";
+import { Avatar, Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { CSSProperties, useState } from "react";
@@ -17,6 +18,7 @@ export function Profile_ComponentAvatarProfile({
 }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setLoading] = useState(false);
 
   const url = APIs.GET({ fileId: fileId, size: "200" });
 
@@ -70,18 +72,33 @@ export function Profile_ComponentAvatarProfile({
 
   return (
     <>
-      <Avatar
-        bg={"white"}
-        style={style}
-        radius={"50%"}
-        size={100}
-        src={url}
-        onClick={() =>
-          router.push(routerImagePreview.main({ id: fileId }), {
-            scroll: false,
-          })
-        }
-      />
+      <Center>
+        <Avatar
+          bg={"white"}
+          style={style}
+          radius={"50%"}
+          size={100}
+          src={url}
+          opacity={isLoading ? 0.5 : 1}
+          onClick={() => {
+            router.push(RouterImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+            setLoading(true);
+          }}
+        />
+        {isLoading && (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        )}
+      </Center>
     </>
   );
 }

src/app_modules/katalog/profile/_component/comp_load_background.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
-import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { RouterImagePreview } from "@/app/lib";
+import { Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function Profile_ComponentLoadBackgroundImage({
   fileId,
 }: {
@@ -15,7 +15,7 @@ export function Profile_ComponentLoadBackgroundImage({
 }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
-
+  const [isLoading, setLoading] = useState(false);
   const url = APIs.GET({ fileId: fileId });
 
   useShallowEffect(() => {
@@ -45,7 +45,7 @@ export function Profile_ComponentLoadBackgroundImage({
             maw={150}
             m={"auto"}
             p={"xs"}
-            src={"/aset/global/no-image.svg"}
+            src={pathAssetImage.no_image}
           />
         </Center>
       </>
@@ -53,23 +53,40 @@ export function Profile_ComponentLoadBackgroundImage({
 
   return (
     <>
-      <Image
-        onClick={() =>
-          router.push(routerImagePreview.main({ id: fileId }), {
-            scroll: false,
-          })
-        }
-        style={{
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: "1px",
-          borderRadius: "5px",
-        }}
-        radius={5}
-        height={200}
-        alt="Image"
-        src={url}
-      />
+      <Center>
+        <Image
+          onClick={() => {
+            setLoading(true);
+            router.push(RouterImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+            borderRadius: "5px",
+          }}
+          radius={"4px"}
+          height={200}
+          alt="Image"
+          opacity={isLoading ? 0.5 : 1}
+          src={url}
+        />
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
     </>
   );
 }