Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/_global/component/comp_load_image.tsx

@@ -1,23 +1,31 @@
 "use client";
 
-import { AspectRatio, Box, Center, Image } from "@mantine/core";
+import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import ComponentGlobal_Loader from "./loader";
+import { useRouter } from "next/navigation";
+import { APIs } from "@/app/lib";
+import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
 
 type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_LoadImage({
-  url,
+  fileId,
   maw,
   h,
   radius,
 }: {
-  url: string;
+  fileId: string;
   maw?: number | string;
   h?: number;
   radius?: IRadius;
 }) {
+  const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const url = APIs.GET({ fileId: fileId });
 
   useShallowEffect(() => {
     onLoadImage();
@@ -37,40 +45,55 @@ export function ComponentGlobal_LoadImage({
 
   if (isImage === null)
     return (
-      <Center h={250}>
-        <ComponentGlobal_Loader variant="dots" size={50} />
+      // <Center h={250}>
+      //   <ComponentGlobal_Loader variant="dots" size={50} />
+      // </Center>
+      <Center>
+        <Skeleton h={250} radius={"sm"} w={200} />
       </Center>
     );
 
   if (!isImage)
     return (
       <>
-        <Center h={250} >
-          <Image
-            alt="No Image"
-            maw={150}
-            m={"auto"}
-            p={"xs"}
-            src={"/aset/global/no-image.svg"}
-          />
+        <Center h={250}>
+          <Image alt="No Image" maw={150} src={pathAssetImage.no_image} />
         </Center>
       </>
     );
 
   return (
     <>
-      <Box h={h ? h : 250}>
-        <Center h={"100%"}>
+      <Center h={"100%"}>
+        <Image
+          onClick={() => {
+            setIsLoading(true);
+            router.push(routerImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          opacity={isLoading ? 0.5 : 1}
+          radius={radius ? radius : 0}
+          alt="Image"
+          maw={maw ? maw : 200}
+          miw={200}
+          src={url}
+        />
+
+        {isLoading ? (
           <Image
-            radius={radius ? radius : 0}
-            alt="Image"
-            maw={maw ? maw : 200}
-            m={"auto"}
-            p={"xs"}
-            src={url}
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
           />
-        </Center>
-      </Box>
+        ) : (
+          ""
+        )}
+      </Center>
     </>
   );
 }