From 5d9e578b504d58892d495dbeb41704c48cde6a1f Mon Sep 17 00:00:00 2001
From: Suphanat Jarukulgowit <suphanat@nimblehq.co>
Date: Wed, 8 Feb 2023 20:04:26 +0700
Subject: [PATCH] [#12] Fix skeleton loader style

---
 .../components/_skeleton-loader.scss          | 27 ++++++++++++-------
 .../stylesheets/components/_survey_list.scss  |  1 -
 src/components/SurveyLoding/index.tsx         |  6 +++--
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/assets/stylesheets/components/_skeleton-loader.scss b/src/assets/stylesheets/components/_skeleton-loader.scss
index 6171136..02c94fc 100644
--- 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
index 5868b6d..5edd809 100644
--- 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
index a709764..8835db5 100644
--- 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>
   );
 };