diff --git a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx b/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx index 679caa1b4021a3b570cd626d5206f16de97060aa..82b1bd43520c12e0f0aa147ec40eb60c81a63acb 100644 --- a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx +++ b/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx @@ -112,7 +112,7 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({ return ( <> - {isLoaded ? ( + {isLoaded && ( <> {isMinuteBlocked && timeStep === TimeStep.HALF_AN_HOUR && ( <ActivateHalfHourLoad /> @@ -134,7 +134,7 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({ </div> </div> </> - ) : null} + )} </> ) } diff --git a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx index 27651f09f3a3ccace5266a1a7b04c6e4ade39c7e..1a893630ec73d29c8479607520c6c0fe1157a830 100644 --- a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx +++ b/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx @@ -3,7 +3,7 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar' import Header from 'components/ContainerComponents/Header/Header' import Content from 'components/ContainerComponents/Content/Content' -import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer' +import FluidChartContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer' import { FluidType } from 'enum/fluid.enum' import { TimeStep } from 'services/dataConsumptionContracts' import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator' @@ -68,7 +68,7 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({ <StyledSpinner size="5em" fluidTypes={fluidTypes} /> </div> )} - <FluidContainer + <FluidChartContainer timeStep={timeStep} fluidTypes={fluidTypes} resetReferenceDate={resetRefenceDate} @@ -76,11 +76,20 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({ handleClickTimeStep={handleClickTimeStepForFluidContainer} setChartLoaded={setChartLoaded} /> - <SingleFluidIndicatorsContainer - timeStep={timeStep} - setIndicatorsLoaded={setIndicatorsLoaded} - fluidTypes={fluidTypes} - /> + <div + className="chart-indicator" + style={{ + display: `${ + isChartLoading || isIndicatorsLoading ? 'none' : 'block' + }`, + }} + > + <SingleFluidIndicatorsContainer + timeStep={timeStep} + setIndicatorsLoaded={setIndicatorsLoaded} + fluidTypes={fluidTypes} + /> + </div> </Content> </> ) diff --git a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx index c533747de344be36a566cd18369ac85e98fc9061..a97b85f604236bad84fda49aceea24b4be3076e3 100644 --- a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx +++ b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx @@ -80,7 +80,6 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({ <img className="cli-content-icon" src={defineBadge() ? defineBadge() : DefaultChallengeIcon} - width={62} ></img> <div className={`cli-content-title`}> {challengeState === 'available' && ( diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss index 8014aeb72d297ee87c413faeaafdd089e3faa03b..3f515c341a395d4dd937f7228f38fab2f4a6d82f 100644 --- a/src/styles/components/_challenges.scss +++ b/src/styles/components/_challenges.scss @@ -97,6 +97,9 @@ .cli-content-icon { margin: 0.5rem 0; z-index: 5; + object-fit: cover; + width: 62px; + height: 100%; } .cli-content-title { color: $text-white;