TP-1264-unify-loading-screens (#135)

* TP-1264-unify-loading-screens
Add new loading screen to two forms to match new loading screen in Hosted Pages

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "private": false,
   "description": "UI components to integrate with Awell Health",
   "repository": {

src/hostedPages/activities/form/ConversationalForm.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react'
-import { Button, ProgressIndicator, HorizontalSpinner } from '../../../atoms'
+import { Button, ProgressIndicator } from '../../../atoms'
 import classes from './form.module.scss'
 import { Question as QuestionComponent } from '../../../molecules'
-import { HostedPageFooter } from '../../layouts/HostedPageLayout/HostedPageFooter'
 import { useScrollHint } from '../../../hooks/useScrollHint'
 import layoutClasses from '../../layouts/HostedPageLayout/hostedPageLayout.module.scss'
 import { FormProps } from '../../../types/form'
 import { useConversationalForm } from '../../../hooks'
 import { Question, UserQuestionType } from '../../../types'
+import {
+  LoadActivityPlaceholder,
+  HostedPageFooter,
+} from '../../layouts/HostedPageLayout'
 
 export const ConversationalForm = ({
   form,
@@ -97,7 +100,7 @@ export const ConversationalForm = ({
           {isEvaluatingQuestionVisibility ||
           currentQuestion?.id === undefined ? (
             <div className={classes.loadingContainer}>
-              <HorizontalSpinner />
+              <LoadActivityPlaceholder />
             </div>
           ) : (
             <>

src/hostedPages/activities/form/TraditionalForm.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react'
-import { Button, HorizontalSpinner, Text } from '../../../atoms'
+import { Button, Text } from '../../../atoms'
 import classes from './form.module.scss'
 import { Question } from '../../../molecules'
 import { useTraditionalForm } from '../../../hooks/useForm'
 import layoutClasses from '../../layouts/HostedPageLayout/hostedPageLayout.module.scss'
 import { FormProps } from '../../../types/form'
 import { UserQuestionType } from '../../../types'
-import { HostedPageFooter } from '../../layouts/HostedPageLayout/HostedPageFooter'
 import { useTheme } from '../../../atoms/themeProvider/ThemeProvider'
+import {
+  LoadActivityPlaceholder,
+  HostedPageFooter,
+} from '../../layouts/HostedPageLayout'
 
 export const TraditionalForm = ({
   form,
@@ -59,7 +62,7 @@ export const TraditionalForm = ({
         >
           {!questionWithVisiblity ? (
             <div className={classes.loadingContainer}>
-              <HorizontalSpinner />
+              <LoadActivityPlaceholder />
             </div>
           ) : (
             <div>

src/hostedPages/index.tsx

@@ -7,3 +7,4 @@ export { CloudinaryUpload } from './activities/cloudinary'
 export { CloudinarySingleFileUpload } from './activities/cloudinary'
 export { HostedPageLayout } from './layouts/HostedPageLayout'
 export { CloseButton } from './layouts/HostedPageLayout'
+export { LoadActivityPlaceholder } from './layouts/HostedPageLayout/LoadActivityPlaceholder'

src/hostedPages/layouts/HostedPageLayout/LoadActivityPlaceholder/LoadActivityPlaceholder.tsx

@@ -0,0 +1,12 @@
+import classes from './loadActivityPlaceholder.module.scss'
+import React, { FC } from 'react'
+
+export const LoadActivityPlaceholder: FC = (): JSX.Element => {
+  return (
+    <div className={classes.loading_indicators}>
+      <div className={classes.loading_indicator}></div>
+      <div className={classes.loading_indicator}></div>
+      <div className={classes.loading_indicator}></div>
+    </div>
+  )
+}

src/hostedPages/layouts/HostedPageLayout/LoadActivityPlaceholder/index.tsx

@@ -0,0 +1 @@
+export { LoadActivityPlaceholder } from './LoadActivityPlaceholder'

src/hostedPages/layouts/HostedPageLayout/LoadActivityPlaceholder/loadActivityPlaceholder.module.scss

@@ -0,0 +1,45 @@
+@use '../../../../globalStyles';
+
+  .loading_indicators {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .loading_indicator {
+    width: 100%;
+    height: 3.125rem;
+    border-radius: var(--awell-border-radius-xl);
+    margin: var(--awell-spacing-2) 0;
+    background: linear-gradient(90deg, transparent, #EEEEEE, transparent);
+    background-size: 200% 100%;
+    background-position: -100% 0;
+    animation: wave 1.2s infinite;
+  }
+
+  /* Styles for larger screens */
+  @media (min-width: 768px) {
+    .loading_indicators {
+       max-width: 570px;
+       padding: var(--awell-spacing-8) 0;
+    }
+  }
+
+   /* Styles for smaller screens (mobile) */
+   @media (max-width: 767px) {
+    .loading_indicators {
+       min-width: 336px;
+       padding: var(--awell-spacing-8) var(--awell-spacing-4);
+    }
+   }
+
+  @keyframes wave {
+    0% {
+      background-position: -100% 0;
+    }
+    100% {
+      background-position: 100% 0;
+    }
+  }
+

src/hostedPages/layouts/HostedPageLayout/index.tsx

@@ -1,2 +1,4 @@
 export { HostedPageLayout } from './HostedPageLayout'
 export { CloseButton } from './CloseButton'
+export { LoadActivityPlaceholder } from './LoadActivityPlaceholder'
+export { HostedPageFooter } from './HostedPageFooter'