From c9a6038cc1e010ad6e80b8048686d57357f55cb7 Mon Sep 17 00:00:00 2001
From: Suphanat Jarukulgowit <suphanat@nimblehq.co>
Date: Sat, 11 Feb 2023 14:30:23 +0700
Subject: [PATCH] [#12] Fix loader style

---
 .../components/_skeleton-loader.scss          |  6 ++---
 .../components/_survey_blank_state.scss       |  8 ++++++
 src/components/SurveyBlankState/index.tsx     | 25 +++++++++++++++++++
 src/screens/Survey/SurveyHomePage/index.tsx   |  2 +-
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/stylesheets/components/_survey_blank_state.scss
 create mode 100644 src/components/SurveyBlankState/index.tsx

diff --git a/src/assets/stylesheets/components/_skeleton-loader.scss b/src/assets/stylesheets/components/_skeleton-loader.scss
index 02c94fc..ed25e75 100644
--- a/src/assets/stylesheets/components/_skeleton-loader.scss
+++ b/src/assets/stylesheets/components/_skeleton-loader.scss
@@ -39,7 +39,7 @@
   }
   .survey-link-loader {
     position: absolute;
-    top: 49.5%;
+    top: 345px;
     right: 0px;
     border-radius: 50%;
   }
@@ -48,13 +48,13 @@
 .survey-title-loader {
   position: absolute;
   left: 25.56%;
-  top: 60%;
+  top: 562px;
 }
 
 .survey-description-loader {
   position: absolute;
   left: 25.56%;
-  top: 65.12%;
+  top: 605px;
 }
 
 .user-avatar-loader {
diff --git a/src/assets/stylesheets/components/_survey_blank_state.scss b/src/assets/stylesheets/components/_survey_blank_state.scss
new file mode 100644
index 0000000..0e7ab00
--- /dev/null
+++ b/src/assets/stylesheets/components/_survey_blank_state.scss
@@ -0,0 +1,8 @@
+.blank-state-container {
+  position: absolute;
+  background-color: red;
+  width: 64px;
+  height: 64px;
+  left: 688px;
+  top: 318px;
+}
diff --git a/src/components/SurveyBlankState/index.tsx b/src/components/SurveyBlankState/index.tsx
new file mode 100644
index 0000000..b562b11
--- /dev/null
+++ b/src/components/SurveyBlankState/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const surveyBlankStateTestIds = {
+  blankStateContainer: 'blankStateContainer',
+  emoji: 'blankStateEmoji',
+  description: 'blankStateDescription',
+};
+
+export interface SurveyBlankStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  emoji: string;
+  description: string;
+}
+
+const SurveyBlankState = ({ emoji, description, ...props }: SurveyBlankStateProps) => {
+  return (
+    <div className="blank-state-container" data-test-id={surveyBlankStateTestIds.blankStateContainer} {...props}>
+      <div className="blank-state-emoji" data-test-id={surveyBlankStateTestIds.emoji}>
+        {emoji}
+      </div>
+      <h2 data-test-id={surveyBlankStateTestIds.description}>{description}</h2>
+    </div>
+  );
+};
+
+export default SurveyBlankState;
diff --git a/src/screens/Survey/SurveyHomePage/index.tsx b/src/screens/Survey/SurveyHomePage/index.tsx
index b228c79..18613ed 100644
--- a/src/screens/Survey/SurveyHomePage/index.tsx
+++ b/src/screens/Survey/SurveyHomePage/index.tsx
@@ -46,7 +46,7 @@ const SurveyHomepageScreen = (): JSX.Element => {
     if (surveysResponse) {
       setSurveyBackground(surveysResponse[0].attributes.coverImageUrl);
     }
-    setSuryveyLoading(false);
+    setSuryveyLoading(true);
   }, []);
 
   const onSlideChange = async (swiper: Swiper) => {