[#12] Fix skeleton loader style

suphanatjarukulgowit · Feb 10, 2023 · 5d9e578 · 5d9e578
1 parent e3a1179
commit 5d9e578
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/assets/stylesheets/components/_skeleton-loader.scss b/src/assets/stylesheets/components/_skeleton-loader.scss
@@ -25,29 +25,36 @@
   top: 18.5%;
 }
 
-.survey-list-loader {
+.survey-list-loader-container {
   position: absolute;
   left: 25.56%;
+  right: 25.56%;
   top: 25.38%;
+  bottom: 36.88%;
+  height: 70%;
+
+  .survey-list-loader {
+    position: absolute;
+    width: 100% !important;
+  }
+  .survey-link-loader {
+    position: absolute;
+    top: 49.5%;
+    right: 0px;
+    border-radius: 50%;
+  }
 }
 
 .survey-title-loader {
   position: absolute;
   left: 25.56%;
-  top: 67.38%;
+  top: 60%;
 }
 
 .survey-description-loader {
   position: absolute;
   left: 25.56%;
-  top: 72.5%;
-}
-
-.survey-link-loader {
-  position: absolute;
-  right: 27.5%;
-  top: 67.38%;
-  border-radius: 50%;
+  top: 65.12%;
 }
 
 .user-avatar-loader {

diff --git a/src/assets/stylesheets/components/_survey_list.scss b/src/assets/stylesheets/components/_survey_list.scss
@@ -5,7 +5,6 @@
   top: 25.38%;
   bottom: 36.88%;
   height: 70%;
-  width: 44rem;
   .swiper {
     width: 100%;
     cursor: pointer;

diff --git a/src/components/SurveyLoding/index.tsx b/src/components/SurveyLoding/index.tsx
@@ -8,10 +8,12 @@ const SurveyLoading = () => {
       <SkeletonLoader width={36} height={36} className="user-avatar-loader" />
       <SkeletonLoader width={150} height={25} className="date-loader" />
       <SkeletonLoader width={100} height={25} className="date-today-loader" />
-      <SkeletonLoader width={704} height={302} className="survey-list-loader" />
+      <div className="survey-list-loader-container">
+        <SkeletonLoader width={704} height={302} className="survey-list-loader" />
+        <SkeletonLoader width={56} height={56} className="survey-link-loader" />
+      </div>
       <SkeletonLoader width={318} height={25} className="survey-title-loader" />
       <SkeletonLoader width={240} height={25} className="survey-description-loader" />
-      <SkeletonLoader width={56} height={56} className="survey-link-loader" />
     </div>
   );
 };