[#12] Fix loader style

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 {

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;
+}

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;

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) => {