tanapa env

src/app_modules/map/_component/detail_data.tsx

@@ -5,10 +5,13 @@ import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_nam
 import {
   Box,
   Button,
+  Flex,
   Grid,
   Group,
   Image,
+  Loader,
   SimpleGrid,
+  Skeleton,
   Stack,
   Text,
   Title,
@@ -40,6 +43,8 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
     setData(res);
   }
 
+  if (!data) return <CustomLoading />;
+
   return (
     <>
       <Stack mt={"lg"} spacing={"xl"}>
@@ -135,3 +140,20 @@ 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>
+  );
+}