Test foto server

src/app_modules/map/_component/detail_data.tsx

@@ -29,6 +29,7 @@ import {
 import { useRouter } from "next/navigation";
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
 
 export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
   const router = useRouter();
@@ -43,7 +44,7 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
     setData(res);
   }
 
-  if (!data) return <CustomLoading />;
+  if (!data) return <ComponentMap_SkeletonDrawerDetailData />;
 
   return (
     <>
@@ -140,20 +141,3 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
     </>
   );
 }
-
-function CustomLoading() {
-  return (
-    <Flex>
-      <Stack w={100}>
-        <Skeleton h={100} animate />
-      </Stack>
-      <Stack style={{ flex: 1 }}>
-        <Skeleton h={5} animate />
-        <Skeleton h={5} animate />
-        <Skeleton h={5} animate />
-        <Skeleton h={5} animate />
-        <Skeleton h={5} animate />
-      </Stack>
-    </Flex>
-  );
-}

src/app_modules/map/_component/index.ts

@@ -1,2 +1,3 @@
 export { ComponentMap_Header } from "./header";
 export { ComponentMap_DrawerDetailData } from "./drawer";
+export { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";

src/app_modules/map/_component/skeleton_detail_data.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { Grid, SimpleGrid, Skeleton, Stack } from "@mantine/core";
+
+export function ComponentMap_SkeletonDrawerDetailData() {
+  return (
+    <Stack mt={"lg"} spacing={"xl"}>
+      <Grid>
+        <Grid.Col span={2}>
+          <Skeleton height={50} circle mb="xl" />
+        </Grid.Col>
+        <Grid.Col span={"auto"}>
+          <Skeleton height={8} radius="xl" />
+        </Grid.Col>
+      </Grid>
+
+      <SimpleGrid
+        cols={2}
+        spacing={"lg"}
+        breakpoints={[
+          { maxWidth: 980, cols: 2, spacing: "md" },
+          { maxWidth: 755, cols: 1, spacing: "sm" },
+          { maxWidth: 600, cols: 1, spacing: "sm" },
+        ]}
+      >
+        <Skeleton height={100} radius="xl" />
+        <Stack>
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} radius="xl" />
+        </Stack>
+      </SimpleGrid>
+    </Stack>
+  );
+}