feat: Add MainSkeleton

package.json

@@ -28,6 +28,7 @@
     "react-draggable": "^4.4.6",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
+    "react-loading-skeleton": "^3.5.0",
     "react-responsive-modal": "^6.4.2",
     "recoil": "^0.7.7",
     "sweetalert2": "^11.14.1",

src/components/main/MainContents.jsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { queryStringFormatter } from '@/util/common-utils'
 import { sessionStore } from '@/store/commonAtom'
+import MainSkeleton from '../ui/MainSkeleton'
 
 export default function MainContents() {
   const { getMessage } = useMessage()
@@ -109,6 +110,7 @@ export default function MainContents() {
     <div className="main-product-list-wrap">
       <div className="main-product-list">
         <ProductItem num={1} name={getMessage('main.content.objectList')}>
+          {objectList.length > 0 ? (
             <ul className="recently-list">
               {objectList.map((row) => {
                 return (
@@ -133,6 +135,9 @@ export default function MainContents() {
                 )
               })}
             </ul>
+          ) : (
+            <MainSkeleton />
+          )}
         </ProductItem>
         <ProductItem num={2} name={getMessage('main.content.notice')}>
           <div className="notice-box">

src/components/ui/Loading.jsx

@@ -1,5 +0,0 @@
-import style from '@/components/ui/Loading.module.css'
-
-export default function Loading() {
-  return <span className={style.loader}></span>
-}

src/components/ui/Loading.module.css

@@ -1,35 +0,0 @@
-.loader {
-  position: relative;
-  font-size: 48px;
-  letter-spacing: 6px;
-}
-.loader:before {
-  content: 'Loading';
-  color: #fff;
-}
-.loader:after {
-  content: '';
-  width: 20px;
-  height: 20px;
-  background-color: #ff3d00;
-  background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0), radial-gradient(circle 1px, #fff3 100%, transparent 0);
-  background-position:
-    14px -4px,
-    12px -1px;
-  border-radius: 50%;
-  position: absolute;
-  margin: auto;
-  top: -5px;
-  right: 66px;
-  transform-origin: center bottom;
-  animation: fillBaloon 1s ease-in-out infinite alternate;
-}
-
-@keyframes fillBaloon {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(3);
-  }
-}

src/components/ui/MainSkeleton.jsx

@@ -0,0 +1,13 @@
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+export default function MainSkeleton() {
+  return (
+    <>
+      <div className="mb-6">
+        <Skeleton height={`50px`} />
+      </div>
+      <Skeleton count={5} />
+    </>
+  )
+}

yarn.lock

@@ -5884,6 +5884,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-loading-skeleton@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz#da2090355b4dedcad5c53cb3f0ed364e3a76d6ca"
+  integrity sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==
+
 react-onclickoutside@^6.13.0:
   version "6.13.1"
   resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz"