Merge branch 'loading-ui' into 'dev'

feat: improve loading ui

See merge request !936

src/components/Analysis/MonthlyAnalysis.tsx

@@ -114,7 +114,7 @@ const MonthlyAnalysis = ({
   return (
     <>
       {loadAnalysis && (
-        <div className="analysis-container-spinner">
+        <div className="loaderContainer">
           <Loader />
         </div>
       )}

src/components/Analysis/monthlyanalysis.scss

@@ -41,10 +41,3 @@
     }
   }
 }
-.analysis-container-spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-}

src/components/Ecogesture/EcogestureView.tsx

@@ -111,13 +111,6 @@ const EcogestureView = () => {
     [navigate]
   )
 
-  const tabProps = useCallback((index: number) => {
-    return {
-      id: `simple-tab-${index}`,
-      'aria-controls': `simple-tabpanel-${index}`,
-    }
-  }, [])
-
   const getTabLabel = useCallback(
     (tab: EcogestureTab) => {
       const tabCounts = {
@@ -184,52 +177,56 @@ const EcogestureView = () => {
   return (
     <>
       <CozyBar titleKey={'common.title_ecogestures'} />
-      {isLoading && (
-        <Content height={headerHeight}>
-          <div className="ecogesture-spinner" aria-busy="true">
+      <Header
+        setHeaderHeight={defineHeaderHeight}
+        desktopTitleKey={'common.title_ecogestures'}
+      >
+        <Tabs
+          value={tabValue}
+          className="ecogestures-tabs"
+          aria-label="ecogestures-tabs"
+          onChange={handleChange}
+          TabIndicatorProps={{ className: 'indicator-tab' }}
+          centered={true}
+        >
+          <Tab
+            label={getTabLabel(EcogestureTab.OBJECTIVE)}
+            className={classNames('single-tab', {
+              ['active']: tabValue === EcogestureTab.OBJECTIVE,
+            })}
+            id={`simple-tab-${EcogestureTab.OBJECTIVE}`}
+            aria-controls={`simple-tabpanel-${EcogestureTab.OBJECTIVE}`}
+            tabIndex={0}
+          />
+          <Tab
+            label={getTabLabel(EcogestureTab.DOING)}
+            className={classNames('single-tab', {
+              ['active']: tabValue === EcogestureTab.DOING,
+            })}
+            id={`simple-tab-${EcogestureTab.DOING}`}
+            aria-controls={`simple-tabpanel-${EcogestureTab.DOING}`}
+            tabIndex={0}
+          />
+          <Tab
+            label={getTabLabel(EcogestureTab.ALL)}
+            className={classNames('single-tab', {
+              ['active']: tabValue === EcogestureTab.ALL,
+            })}
+            id={`simple-tab-${EcogestureTab.ALL}`}
+            aria-controls={`simple-tabpanel-${EcogestureTab.ALL}`}
+            tabIndex={0}
+          />
+        </Tabs>
+      </Header>
+
+      <Content height={headerHeight}>
+        {isLoading && (
+          <div className="loaderContainer">
             <Loader text={t('ecogestures.loading')} />
           </div>
-        </Content>
-      )}
-      {!isLoading && (
-        <>
-          <Header
-            setHeaderHeight={defineHeaderHeight}
-            desktopTitleKey={'common.title_ecogestures'}
-          >
-            <Tabs
-              value={tabValue}
-              className="ecogestures-tabs"
-              aria-label="ecogestures-tabs"
-              onChange={handleChange}
-              TabIndicatorProps={{ className: 'indicator-tab' }}
-              centered={true}
-            >
-              <Tab
-                label={getTabLabel(EcogestureTab.OBJECTIVE)}
-                className={classNames('single-tab', {
-                  ['active']: tabValue === EcogestureTab.OBJECTIVE,
-                })}
-                {...tabProps(EcogestureTab.OBJECTIVE)}
-              />
-              <Tab
-                label={getTabLabel(EcogestureTab.DOING)}
-                className={classNames('single-tab', {
-                  ['active']: tabValue === EcogestureTab.DOING,
-                })}
-                {...tabProps(EcogestureTab.DOING)}
-              />
-              <Tab
-                label={getTabLabel(EcogestureTab.ALL)}
-                className={classNames('single-tab', {
-                  ['active']: tabValue === EcogestureTab.ALL,
-                })}
-                {...tabProps(EcogestureTab.ALL)}
-              />
-            </Tabs>
-          </Header>
-
-          <Content height={headerHeight}>
+        )}
+        {!isLoading && (
+          <>
             <TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
               {profile.isProfileEcogestureCompleted &&
                 (totalAvailable === totalViewed &&
@@ -298,23 +295,23 @@ const EcogestureView = () => {
                 />
               )}
             </TabPanel>
-          </Content>
-        </>
-      )}
-      {openEcogestureInitModal && (
-        <EcogestureInitModal
-          open={openEcogestureInitModal}
-          handleCloseClick={handleCloseEcogestureInitModal}
-          handleLaunchForm={handleLaunchForm}
-        />
-      )}
-      {openEcogestureReinitModal && (
-        <EcogestureReinitModal
-          open={openEcogestureReinitModal}
-          handleCloseClick={handleCloseEcogestureReinitModal}
-          handleLaunchReinit={handleLaunchReinit}
-        />
-      )}
+          </>
+        )}
+        {openEcogestureInitModal && (
+          <EcogestureInitModal
+            open={openEcogestureInitModal}
+            handleCloseClick={handleCloseEcogestureInitModal}
+            handleLaunchForm={handleLaunchForm}
+          />
+        )}
+        {openEcogestureReinitModal && (
+          <EcogestureReinitModal
+            open={openEcogestureReinitModal}
+            handleCloseClick={handleCloseEcogestureReinitModal}
+            handleLaunchReinit={handleLaunchReinit}
+          />
+        )}
+      </Content>
     </>
   )
 }

src/components/Ecogesture/SingleEcogesture.tsx

@@ -119,14 +119,6 @@ const SingleEcogesture = () => {
     setValidExploration,
   ])
 
-  if (isLoading) {
-    return (
-      <Content height={headerHeight}>
-        <Loader />
-      </Content>
-    )
-  }
-
   if (ecogesture) {
     return (
       <>
@@ -141,87 +133,98 @@ const SingleEcogesture = () => {
           displayBackArrow={true}
         />
         <Content height={headerHeight}>
-          <div className="single-ecogesture">
-            <div className="icon-container">
-              {ecogestureIcon && (
-                <StyledIcon
-                  className="icon-big"
-                  icon={ecogestureIcon}
-                  size={220}
-                />
-              )}
-            </div>
-            <div className="details">
-              <div className="text-22 title">{ecogesture.shortName}</div>
-              <div className="efficiency">
-                <span className="text text-14-normal">
-                  {t('ecogesture_modal.efficiency')}
-                </span>
-                <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
-              </div>
+          {isLoading && (
+            <div className="loaderContainer">
+              <Loader />
             </div>
-            <div className="styled-container">
-              <div className="long-name text-18-bold">
-                {ecogesture.longName}
-              </div>
-              <div
-                className="toggle-text text-15-normal"
-                onClick={toggleMoreDetail}
-                role="button"
-              >
-                {isMoreDetail
-                  ? t('ecogesture_modal.show_less')
-                  : t('ecogesture_modal.show_more')}
+          )}
+          {!isLoading && (
+            <div className="single-ecogesture">
+              <div className="icon-container">
+                {ecogestureIcon && (
+                  <StyledIcon
+                    className="icon-big"
+                    icon={ecogestureIcon}
+                    size={220}
+                  />
+                )}
               </div>
-              <div
-                className={classNames('description text-16-normal-150', {
-                  ['block']: isMoreDetail === true,
-                })}
-              >
-                {ecogesture.longDescription}
+              <div className="details">
+                <div className="text-22 title">{ecogesture.shortName}</div>
+                <div className="efficiency">
+                  <span className="text text-14-normal">
+                    {t('ecogesture_modal.efficiency')}
+                  </span>
+                  <EfficiencyRating
+                    result={Math.round(ecogesture.efficiency)}
+                  />
+                </div>
               </div>
-            </div>
-            {selectionCompleted && (
-              <div className="buttons-selection">
-                <IconButton
-                  aria-label={t('ecogesture.objective')}
-                  onClick={toggleObjective}
-                  classes={{
-                    root: `btn-secondary-negative objective-btn ${
-                      isObjective && 'active'
-                    }`,
-                    label: 'text-15-normal',
-                  }}
+              <div className="styled-container">
+                <div className="long-name text-18-bold">
+                  {ecogesture.longName}
+                </div>
+                <div
+                  className="toggle-text text-15-normal"
+                  onClick={toggleMoreDetail}
+                  role="button"
                 >
-                  <Icon
-                    className="status-icon"
-                    icon={
-                      isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
-                    }
-                    size={40}
-                  />
-                  <span>{t('ecogesture.objective')}</span>
-                </IconButton>
-                <IconButton
-                  aria-label={t('ecogesture.doing')}
-                  onClick={toggleDoing}
-                  classes={{
-                    root: `btn-secondary-negative doing-btn ${
-                      isDoing && 'active'
-                    }`,
-                    label: 'text-15-normal',
-                  }}
+                  {isMoreDetail
+                    ? t('ecogesture_modal.show_less')
+                    : t('ecogesture_modal.show_more')}
+                </div>
+                <div
+                  className={classNames('description text-16-normal-150', {
+                    ['block']: isMoreDetail === true,
+                  })}
                 >
-                  <Icon
-                    className="status-icon"
-                    icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
-                    size={40}
-                  />
-                  <span>{t('ecogesture.doing')}</span>
-                </IconButton>
+                  {ecogesture.longDescription}
+                </div>
               </div>
-            )}
-          </div>
+              {selectionCompleted && (
+                <div className="buttons-selection">
+                  <IconButton
+                    aria-label={t('ecogesture.objective')}
+                    onClick={toggleObjective}
+                    classes={{
+                      root: `btn-secondary-negative objective-btn ${
+                        isObjective && 'active'
+                      }`,
+                      label: 'text-15-normal',
+                    }}
+                  >
+                    <Icon
+                      className="status-icon"
+                      icon={
+                        isObjective
+                          ? objectiveEnabledIcon
+                          : objectiveDisabledIcon
+                      }
+                      size={40}
+                    />
+                    <span>{t('ecogesture.objective')}</span>
+                  </IconButton>
+                  <IconButton
+                    aria-label={t('ecogesture.doing')}
+                    onClick={toggleDoing}
+                    classes={{
+                      root: `btn-secondary-negative doing-btn ${
+                        isDoing && 'active'
+                      }`,
+                      label: 'text-15-normal',
+                    }}
+                  >
+                    <Icon
+                      className="status-icon"
+                      icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+                      size={40}
+                    />
+                    <span>{t('ecogesture.doing')}</span>
+                  </IconButton>
+                </div>
+              )}
+            </div>
+          )}
         </Content>
       </>
     )

src/components/EcogestureForm/EcogestureFormView.tsx

 import Content from 'components/Content/Content'
-import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
-import EcogestureFormSingleChoice from 'components/EcogestureForm/EcogestureFormSingleChoice'
 import EcogestureLaunchFormModal from 'components/EcogestureForm/EcogestureLaunchFormModal'
 import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
@@ -22,6 +20,8 @@ import { useAppSelector } from 'store/hooks'
 import { updateProfile } from 'store/profile/profile.actions'
 import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcogesture.actions'
 import { AppActionsTypes } from 'store/store'
+import EcogestureFormEquipment from './EcogestureFormEquipment'
+import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
 
 const EcogestureFormView = () => {
   const {
@@ -95,14 +95,6 @@ const EcogestureFormView = () => {
     }
   }, [handleEndForm, step])
 
-  if (isLoading) {
-    return (
-      <Content height={headerHeight}>
-        <Loader />
-      </Content>
-    )
-  }
-
   return (
     <>
       <CozyBar titleKey={'common.title_ecogestures'} />
@@ -111,6 +103,11 @@ const EcogestureFormView = () => {
         desktopTitleKey={'common.title_ecogestures'}
       />
       <Content height={headerHeight}>
+        {isLoading && (
+          <div className="loaderContainer">
+            <Loader />
+          </div>
+        )}
         {isProfileTypeCompleted ? (
           <ProfileTypeView />
         ) : (

src/components/EcogestureSelection/EcogestureSelection.tsx

@@ -108,16 +108,6 @@ const EcogestureSelection = () => {
     }
   }, [ecogestureService, profileEcogesture])
 
-  if (isLoading) {
-    return (
-      <Content height={headerHeight}>
-        <div className="eg-selection-loader">
-          <Loader />
-        </div>
-      </Content>
-    )
-  }
-
   const renderEcogestureSelection = () => {
     if (indexEcogesture <= ecogestureList.length - 1) {
       return (
@@ -157,13 +147,24 @@ const EcogestureSelection = () => {
             : ''}
         </div>
       </Header>
-      <Content height={headerHeight}>{renderEcogestureSelection()}</Content>
-      {openEcogestureSelectionModal && (
-        <EcogestureSelectionModal
-          open={openEcogestureSelectionModal}
-          handleCloseClick={() => setOpenEcogestureSelectionModal(false)}
-        />
-      )}
+      <Content height={headerHeight}>
+        {isLoading && (
+          <div className="loaderContainer">
+            <Loader />
+          </div>
+        )}
+        {!isLoading && (
+          <>
+            {renderEcogestureSelection()}
+            {openEcogestureSelectionModal && (
+              <EcogestureSelectionModal
+                open={openEcogestureSelectionModal}
+                handleCloseClick={() => setOpenEcogestureSelectionModal(false)}
+              />
+            )}
+          </>
+        )}
+      </Content>
     </>
   )
 }

src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap

@@ -70,11 +70,11 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
         title="Bonhomme de neige"
         validate={[Function]}
       />
+      <mock-ecogestureselectionmodal
+        handleCloseClick={[Function]}
+        open={true}
+      />
     </mock-content>
-    <mock-ecogestureselectionmodal
-      handleCloseClick={[Function]}
-      open={true}
-    />
   </EcogestureSelection>
 </Provider>
 `;

src/components/EcogestureSelection/ecogestureSelection.scss

 @import '../../styles/base/color';
 @import '../../styles/base/breakpoint';
 
-.eg-selection-loader {
-  min-height: inherit;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  @media all and(min-width: $width-tablet) {
-    min-height: 80vh;
-  }
-}
-
 .eg-selection-header {
   color: $grey-bright;
   text-align: center;

src/components/Home/ConsumptionView.tsx

@@ -248,7 +248,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
         {showOfflineData && (
           <>
             {loading && (
-              <div className={'consumptionview-loading'} aria-busy="true">
+              <div className="consumptionview-loading">
                 <Loader fluidType={fluidType} />
               </div>
             )}

src/components/Quiz/QuizCustomQuestionContent.tsx

@@ -99,7 +99,7 @@ const QuizCustomQuestionContent = ({
         </p>
 
         {isLoading ? (
-          <div className={'question-loading'} aria-busy="true">
+          <div className="question-loading">
             <Loader />
           </div>
         ) : (

src/styles/index.scss

@@ -69,6 +69,9 @@
 
 .loaderContainer {
   height: 80vh;
-  justify-content: center;
   display: flex;
+  flex: 1;
+  justify-content: center;
+  // useful when text is rendered with loader
+  align-items: center;
 }