[#12] Rebase fix layout default conflict

src/assets/stylesheets/components/_skeleton-loader.scss

@@ -0,0 +1,58 @@
+.skeleton-loader {
+  background: rgb(64, 64, 64);
+  background: linear-gradient(90deg, rgba(64, 64, 64, 1) 40%, rgba(95, 95, 95, 1) 50%, rgba(64, 64, 64, 1) 60%);
+  background-size: 500% 100%;
+  border-radius: 12px;
+  animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+}
+
+.date-loader {
+  position: absolute;
+  left: 25.56%;
+  top: 13.5%;
+}
+.date-today-loader {
+  position: absolute;
+  left: 25.56%;
+  top: 18.5%;
+}
+
+.survey-list-loader {
+  position: absolute;
+  left: 25.56%;
+  top: 25.38%;
+}
+
+.survey-title-loader {
+  position: absolute;
+  left: 25.56%;
+  top: 67.38%;
+}
+
+.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%;
+}
+
+.user-avatar-loader {
+  position: absolute;
+  right: 2.22%;
+  top: 4%;
+  border-radius: 50%;
+}

src/assets/stylesheets/components/survey_title.scss → src/assets/stylesheets/components/_survey_title.scss

@@ -2,31 +2,25 @@
   flex-direction: column;
   align-items: left;
   margin-top: 32px;
-
-  color: #fff;
-
+  color: #ffffff;
   h1 {
     font-family: 'Neuzeit S LT Std Bold', sans-serif;
-    font-size: 22px;
     font-style: bold;
+    font-size: 22px;
     font-weight: 800;
   }
-
   .survey-description {
     padding-right: 0.5rem;
-
     opacity: 0.6;
-
     font-family: 'Neuzeit S LT Std Normal', sans-serif;
-    font-size: 17px;
     font-style: normal;
+    font-size: 17px;
   }
 }
-
 .survey-link {
   position: absolute;
-  top: 67.38%;
+  left: 70.56%;
   right: 25.56%;
+  top: 67.38%;
   bottom: 25.62%;
-  left: 70.56%;
 }

src/assets/stylesheets/components/index.scss

@@ -6,3 +6,4 @@
 @import './survey_list';
 @import './background-image';
 @import './survey_title';
+@import './skeleton-loader';

src/components/Layout/Default/index.test.tsx

@@ -33,7 +33,7 @@ jest.mock('react-router-dom', () => ({
 
 describe('DefaultLayout', () => {
   it('renders the app logo link', () => {
-    renderWithRouter(<DefaultLayout />);
+    renderWithRouter(<DefaultLayout isSurveyLoading={false} />);
 
     const appLogoLink = screen.getByTestId(defaultLayoutDataTestIds.appLogo);
 
@@ -44,7 +44,7 @@ describe('DefaultLayout', () => {
     mockUserLoggedIn();
 
     it('renders the user menu', () => {
-      renderWithRouter(<DefaultLayout />, { withContextProvider: true });
+      renderWithRouter(<DefaultLayout isSurveyLoading={false} />, { withContextProvider: true });
 
       const userMenu = screen.getByTestId(userProfileDatatestIds.userMenu);
 
@@ -53,7 +53,7 @@ describe('DefaultLayout', () => {
 
     describe('given the user clicks on the logout menu', () => {
       it('logs the user out', async () => {
-        renderWithRouter(<DefaultLayout />, { withContextProvider: true });
+        renderWithRouter(<DefaultLayout isSurveyLoading={false} />, { withContextProvider: true });
 
         const userMenu = screen.getByTestId(userProfileDatatestIds.userMenu);
         const logoutMenu = within(userMenu).getByText('auth.sign_out');

src/components/Layout/Default/index.tsx

@@ -9,6 +9,7 @@ import useAuth from 'hooks/useAuth';
 
 export type DefaultLayoutProps = {
   onHelmetStateChange?: () => void;
+  isSurveyLoading: boolean;
   children?: React.ReactNode;
 };
 
@@ -18,7 +19,7 @@ const defaultLayoutDataTestIds = {
   userProfile: 'userProfile',
 };
 
-const DefaultLayout = ({ children }: DefaultLayoutProps) => {
+const DefaultLayout = ({ children, isSurveyLoading }: DefaultLayoutProps) => {
   const { auth, userProfile, setAuth, setUserProfile } = useAuth();
   const navigate = useNavigate();
   const logout = async () => {
@@ -43,9 +44,13 @@ const DefaultLayout = ({ children }: DefaultLayoutProps) => {
         <Link to="/home" data-test-id={defaultLayoutDataTestIds.appLogo}>
           <Logo></Logo>
         </Link>
-        {userProfile && (
-          <UserProfileData data-test-id={defaultLayoutDataTestIds.userProfile} userProfile={userProfile} onLogout={logout} />
-        )}
+        {!isSurveyLoading ? (
+          <>
+            {userProfile && (
+              <UserProfileData data-test-id={defaultLayoutDataTestIds.userProfile} userProfile={userProfile} onLogout={logout} />
+            )}
+          </>
+        ) : null}
       </header>
       <main>{children}</main>
     </HelmetProvider>

src/components/SkeletonLoader/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+// import styles from './SkeletonLoader.module.css';
+
+interface SkeletonLoaderProps {
+  width: number | string;
+  height: number;
+  className?: string;
+}
+
+const SkeletonLoader = ({ width, height, className }: SkeletonLoaderProps) => {
+  return (
+    <>
+      <div className={`skeleton-loader ${className}`} style={{ width, height }} />
+    </>
+  );
+};
+
+export default SkeletonLoader;

src/components/SurveyLoding/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import SkeletonLoader from 'components/SkeletonLoader';
+
+const SurveyLoading = () => {
+  return (
+    <div>
+      <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" />
+      <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>
+  );
+};
+
+export default SurveyLoading;

src/screens/Survey/SurveyHomePage/index.tsx

@@ -8,6 +8,7 @@ import { me } from 'adapters/User';
 import BackgroundImage from 'components/BackGroundImage';
 import DefaultLayout from 'components/Layout/Default';
 import SurveyList from 'components/SurveyList';
+import SurveyLoading from 'components/SurveyLoding';
 import useAuth from 'hooks/useAuth';
 import { Survey } from 'types/survey';
 
@@ -63,9 +64,11 @@ const SurveyHomepageScreen = (): JSX.Element => {
 
   return (
     <div>
-      <DefaultLayout>
+      <DefaultLayout isSurveyLoading={surveyLoading} data-test-id={SurveyHomepageScreenDataTestIds.defaultLayout}>
         {surveyLoading ? (
-          <div>display skeleton loading</div>
+          <div>
+            <SurveyLoading></SurveyLoading>
+          </div>
         ) : surveys && surveys.length !== 0 ? (
           <>
             <BackgroundImage imageUrl={surveyBackground} />