partner slide skeleton

src/components/main/PartnersSection.tsx

@@ -27,7 +27,7 @@ const Partners = () => {
   const [partnerData, setPartnerData]: [
     partnersType[],
     React.Dispatch<React.SetStateAction<partnersType[]>>
-  ] = useState([{ id: 0, note: "", partner: "" }]);
+  ] = useState([{ id: -1, note: "", partner: "" }]);
 
   // Effect
   useEffect(() => {
@@ -51,7 +51,7 @@ const Partners = () => {
                 prevEl: ".slider-prev",
               }}
             >
-              {partnerData
+              {partnerData[0].id > -1
                 ? partnerData.map((image: partnersType) => {
                     return (
                       <SwiperSlide key={uuidv4()}>
@@ -61,7 +61,13 @@ const Partners = () => {
                       </SwiperSlide>
                     );
                   })
-                : ""}
+                : ["", "", "", "", "", ""].map(() => {
+                    return (
+                      <SwiperSlide key={uuidv4()}>
+                        <div className="partners-slide skeleton"></div>
+                      </SwiperSlide>
+                    );
+                  })}
             </Swiper>
             <div className="slider-prev slider-next-white slider-next-white-prev">
               <img src={arrowPrev} alt="" />

src/pages/Main.tsx

@@ -9,7 +9,7 @@ import Partners from "../components/main/PartnersSection";
 
 const Main = () => {
   useEffect(() => {
-    window.scrollTo(0, 0);
+    // window.scrollTo(0, 0);
   }, []);
   return (
     <main className="main">

src/styles/_main.scss

@@ -139,7 +139,14 @@
   @include flex-c;
   min-height: 18rem;
   width: 100%;
+  background: #fff;
   border: 0.1rem solid #00000020;
+
+  &.skeleton {
+    @include shineLoad;
+    height: 18rem;
+    width: 100%;
+  }
 }
 
 .rating-inner {