fix: loading chart + scale if 0

src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx

-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useEffect } from 'react'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
 import Header from 'components/ContainerComponents/Header/Header'
@@ -12,9 +12,12 @@ import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCard
 import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
 
 const HomeViewContainer: React.FC = () => {
-  const { fluidTypes, previousTimeStep, setPreviousTimeStep } = useContext(
-    AppContext
-  )
+  const {
+    fluidTypes,
+    previousTimeStep,
+    setPreviousTimeStep,
+    chartIsLoaded,
+  } = useContext(AppContext)
   const [timeStep, setTimeStep] = useState<TimeStep>(
     previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR
       ? previousTimeStep
@@ -48,6 +51,17 @@ const HomeViewContainer: React.FC = () => {
     setHeaderHeight(height)
   }
 
+  useEffect(() => {
+    console.log(
+      'isChartLoading',
+      isChartLoading,
+      'isIndicatorsLoading',
+      isIndicatorsLoading,
+      'chartIsLoaded',
+      chartIsLoaded
+    )
+  }, [isChartLoading, isIndicatorsLoading, chartIsLoaded])
+
   return (
     <React.Fragment>
       <CozyBar />
@@ -65,24 +79,32 @@ const HomeViewContainer: React.FC = () => {
             />
           </Header>
           <Content height={headerHeight}>
-            {(isChartLoading || isIndicatorsLoading) && (
+            {(isChartLoading || isIndicatorsLoading || !chartIsLoaded) && (
               <div className="content-view-loading">
                 <StyledSpinner size="5em" />
               </div>
             )}
-            <FluidContainer
-              timeStep={timeStep}
-              fluidTypes={fluidTypes}
-              resetReferenceDate={resetRefenceDate}
-              multiFluid={true}
-              handleClickTimeStep={handleClickTimeStepForFluidContainer}
-              setChartLoaded={setChartLoaded}
-            />
-            <MultliFluidIndicatorsContainer
-              timeStep={timeStep}
-              setIndicatorsLoaded={setIndicatorsLoaded}
-            />
-            <ChallengeCardContainer />
+            <div
+              className={`${
+                isChartLoading || isIndicatorsLoading || !chartIsLoaded
+                  ? 'chart-indicator-none'
+                  : 'chart-indicator-block'
+              }`}
+            >
+              <FluidContainer
+                timeStep={timeStep}
+                fluidTypes={fluidTypes}
+                resetReferenceDate={resetRefenceDate}
+                multiFluid={true}
+                handleClickTimeStep={handleClickTimeStepForFluidContainer}
+                setChartLoaded={setChartLoaded}
+              />
+              <MultliFluidIndicatorsContainer
+                timeStep={timeStep}
+                setIndicatorsLoaded={setIndicatorsLoaded}
+              />
+              <ChallengeCardContainer />
+            </div>
           </Content>
         </>
       ) : (

src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx

@@ -16,7 +16,9 @@ interface SingleFluidViewContainerProps {
 const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
   fluidTypes,
 }: SingleFluidViewContainerProps) => {
-  const { setPreviousTimeStep, previousTimeStep } = useContext(AppContext)
+  const { setPreviousTimeStep, previousTimeStep, chartIsLoaded } = useContext(
+    AppContext
+  )
 
   const [timeStep, setTimeStep] = useState<TimeStep | null>(
     previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR
@@ -71,14 +73,16 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
         />
       </Header>
       <Content height={headerHeight}>
-        {(isChartLoading || isIndicatorsLoading) && (
+        {(isChartLoading || isIndicatorsLoading || !chartIsLoaded) && (
           <div className="content-view-loading">
             <StyledSpinner size="5em" fluidTypes={fluidTypes} />
           </div>
         )}
         <div
           className={`${
-            isChartLoading ? 'chart-indicator-none' : 'chart-indicator-display'
+            isChartLoading || isIndicatorsLoading || !chartIsLoaded
+              ? 'chart-indicator-none'
+              : 'chart-indicator-block'
           }`}
         >
           <FluidChartContainer

src/components/ContentComponents/Charts/BarChart.tsx

@@ -76,7 +76,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
     const maxCompare = chartData.comparisonData
       ? Math.max(...chartData.comparisonData.map(d => d.value))
       : 0
-    max = max === -1 ? 15 : max
+    max = max <= 0 ? 15 : max
     return showCompare ? Math.max(max, maxCompare) : max
   }
 

src/components/ContentComponents/FluidChart/FluidChartSlide.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { DateTime } from 'luxon'
 import {
   IConsumptionDataManager,
@@ -12,6 +12,7 @@ import { defineTimePeriod } from 'services/dateChartService'
 import { FluidType } from 'enum/fluid.enum'
 
 import BarChart from 'components/ContentComponents/Charts/BarChart'
+import { AppContext } from 'components/Contexts/AppContextProvider'
 
 interface FluidChartSlideProps {
   index: number
@@ -48,8 +49,11 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
   const [chartData, setChartData] = useState<IChartData>(new ChartData([]))
   const [isLoaded, setIsLoaded] = useState<boolean>(false)
 
+  const { setChartIsLoaded, chartIsLoaded } = useContext(AppContext)
+
   useEffect(() => {
     let subscribed = true
+    console.log('in fluid chart', chartIsLoaded)
 
     async function loadData() {
       const [timePeriod, compareTimePeriod] = await Promise.all([
@@ -65,15 +69,19 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
       if (subscribed && graphData && graphData.actualData.length > 0) {
         setChartData(graphData)
         setIsLoaded(true)
+        setChartIsLoaded(true)
       }
     }
     setIsLoaded(false)
+
     loadData()
     return () => {
       subscribed = false
     }
   }, [timeStep, fluidTypes])
 
+  console.log('in fluid chart vrac', chartIsLoaded)
+
   return (
     <div className="fs-slide">
       {!isLoaded ? null : (

src/components/Contexts/AppContextProvider.tsx

@@ -29,6 +29,8 @@ interface AppContextProps {
   setPreviousTimeStep: Function
   userProfile: UserProfile | null
   setWelcomeModalViewed: Function
+  chartIsLoaded: boolean
+  setChartIsLoaded: Function
 }
 
 export const AppContext = React.createContext<AppContextProps>({
@@ -52,6 +54,8 @@ export const AppContext = React.createContext<AppContextProps>({
   userProfile: null,
   setPreviousTimeStep: () => null,
   setWelcomeModalViewed: () => null,
+  chartIsLoaded: false,
+  setChartIsLoaded: () => null,
 })
 
 interface AppContextProviderProps {
@@ -63,6 +67,7 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
   children,
   client,
 }: AppContextProviderProps) => {
+  const [chartIsLoaded, setChartIsLoaded] = useState<boolean>(false)
   const [isIndexesLoading, setIndexesLoading] = useState<boolean>(false)
   const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState<
     boolean | null
@@ -317,6 +322,8 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
         previousTimeStep,
         setPreviousTimeStep,
         setWelcomeModalViewed,
+        setChartIsLoaded,
+        chartIsLoaded,
       }}
     >
       {children}

src/styles/components/_fluid.scss

@@ -112,10 +112,12 @@
   }
 }
 .chart-indicator-none {
-  display: none;
+  visibility: hidden;
+  height: 0;
 }
 .chart-indicator-block {
-  display: block;
+  visibility: visible;
+  height: auto;
 }