From 7ce52bd5ffa57a6b82dcdd49025516ce1d8c9efd Mon Sep 17 00:00:00 2001
From: Me1e <mele0404@naver.com>
Date: Wed, 2 Aug 2023 04:52:48 +0900
Subject: [PATCH] =?UTF-8?q?feat(detail):=20skeleton=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/nextjs/pages/report/[id].tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/report/[id].tsx b/packages/nextjs/pages/report/[id].tsx
index 9888c9c..b7a6501 100644
--- a/packages/nextjs/pages/report/[id].tsx
+++ b/packages/nextjs/pages/report/[id].tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
+import { CircularProgress, Skeleton } from "@mui/material";
 import { Swiper, SwiperSlide } from "swiper/react";
 import Writer from "~~/components/Writer";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
@@ -11,6 +12,7 @@ const DetailPage = () => {
   const {
     query: { id },
   } = useRouter();
+  const [isLoading, setIsLoading] = useState(true);
 
   const [detailData, setDetailData] = useState({
     alertLevel: -1,
@@ -84,7 +86,18 @@ const DetailPage = () => {
   if (id === undefined) return null;
   return (
     <DetailWrapper>
-      <DetailImage src={detailData.image} />
+      {isLoading && (
+        <SkeletonElement>
+          <CircularProgress />
+        </SkeletonElement>
+      )}
+      <DetailImage
+        src={detailData.image}
+        onLoad={() => {
+          setIsLoading(false);
+        }}
+        style={{ display: isLoading ? "none" : "block" }}
+      />
       <DetailBox>
         <DetailInfo>
           <DetailDate>{formatTimestamp(detailData.timestamp)}</DetailDate>
@@ -310,3 +323,13 @@ const Badge = styled.div<{ delay: number }>`
   animation: ${floatAnimation} 2s infinite ease-in-out;
   animation-delay: ${props => props.delay}s;
 `;
+
+const SkeletonElement = styled.div`
+  border-radius: 30px;
+  width: 100%;
+  height: 327px;
+  background-color: #ccc; /* 스켈레톤의 배경색 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;