refactor: remove unused chart.loading

src/components/Consumption/ConsumptionView.spec.tsx

@@ -59,7 +59,6 @@ describe('ConsumptionView component', () => {
     const store = createMockEcolyoStore({
       chart: {
         ...mockChartState,
-        loading: false,
         showOfflineData: true,
       },
       global: {
@@ -83,27 +82,6 @@ describe('ConsumptionView component', () => {
     ).toBeTruthy()
   })
 
-  it('should display a spinner when fluid connected and is loading', () => {
-    const store = createMockEcolyoStore({
-      chart: {
-        ...mockChartState,
-        loading: true,
-        showOfflineData: true,
-      },
-      global: {
-        fluidStatus: mockFluidStatus,
-        releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      },
-      modal: mockModalState,
-    })
-    render(
-      <Provider store={store}>
-        <ConsumptionView fluidType={FluidType.ELECTRICITY} />
-      </Provider>
-    )
-    expect(screen.getByRole('progressbar')).toBeInTheDocument()
-  })
-
   it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => {
     const store = createMockEcolyoStore({
       chart: {

src/components/Consumption/ConsumptionView.tsx

-import classNames from 'classnames'
 import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal/ExpiredConsentModal'
 import Content from 'components/Content/Content'
 import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
@@ -8,7 +7,6 @@ import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
 import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
 import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
-import Loader from 'components/Loader/Loader'
 import PartnerIssueModal from 'components/PartnerIssue/PartnerIssueModal'
 import ReleaseNotesModal from 'components/ReleaseNotesModal/ReleaseNotesModal'
 import { useClient } from 'cozy-client'
@@ -43,13 +41,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
   const dispatch = useAppDispatch()
   const isMulti = fluidType === FluidType.MULTIFLUID
   const {
-    chart: {
-      currentTimeStep,
-      loading,
-      showOfflineData,
-      selectedDate,
-      currentIndex,
-    },
+    chart: { currentTimeStep, showOfflineData, selectedDate, currentIndex },
     global: { fluidStatus, releaseNotes },
     modal: { partnersIssueModal, customPopupModal },
   } = useAppSelector(state => state.ecolyo)
@@ -242,23 +234,12 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
         )}
         {showOfflineData && (
           <>
-            {loading && (
-              <div className="consumptionview-loading">
-                <Loader fluidType={fluidType} />
-              </div>
-            )}
-            <div
-              className={classNames('consumptionview-content', {
-                ['--hidden']: loading,
-              })}
-            >
-              <FluidChart
-                fluidType={fluidType}
-                setActive={setActive}
-                key={lastDataDateKey}
-              />
-              <ConsumptionDetails fluidType={fluidType} />
-            </div>
+            <FluidChart
+              fluidType={fluidType}
+              setActive={setActive}
+              key={lastDataDateKey}
+            />
+            <ConsumptionDetails fluidType={fluidType} />
             {!isMulti && (
               <div className="konnector-section">
                 <KonnectorViewerCard

src/components/Consumption/consumptionView.scss

 @import 'src/styles/base/breakpoint';
 @import 'src/styles/base/color';
 
-.consumptionview-loading {
-  background-color: $default-background;
-  height: 80vh;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.consumptionview-content {
-  background-color: $default-background;
-  &.--hidden {
-    display: none;
-  }
-}
+// put these into KonnectorViewerCard ?
 .konnector-section {
-  background-color: $default-background;
   margin: 0 auto;
-  box-sizing: border-box;
   padding-bottom: 1rem;
   max-width: 45.75rem;
-  width: 100%;
   @media #{$large-phone} {
     padding-left: 1rem;
     padding-right: 1rem;

src/components/FluidChart/FluidChartSlide.tsx

@@ -8,7 +8,7 @@ import { Datachart } from 'models'
 import React, { useEffect, useState } from 'react'
 import ConsumptionService from 'services/consumption.service'
 import DateChartService from 'services/dateChart.service'
-import { setCurrentDataChart, setLoading } from 'store/chart/chart.slice'
+import { setCurrentDataChart } from 'store/chart/chart.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import './fluidChartSlide.scss'
 
@@ -85,7 +85,6 @@ const FluidChartSlide = ({
         if (subscribed && graphData && graphData?.actualData.length > 0) {
           setChartData(graphData)
           setIsDataLoaded(true)
-          dispatch(setLoading(false))
         }
       }
     }

src/components/FluidChart/FluidChartSwipe.tsx

@@ -19,8 +19,9 @@ interface FluidChartSwipeProps {
 
 const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
   const dispatch = useAppDispatch()
-  const { currentIndex, currentTimeStep, selectedDate, loading } =
-    useAppSelector(state => state.ecolyo.chart)
+  const { currentIndex, currentTimeStep, selectedDate } = useAppSelector(
+    state => state.ecolyo.chart
+  )
   const swipe = useRef<HTMLDivElement>(null)
   const [isSwitching, setIsSwitching] = useState(false)
 
@@ -53,7 +54,7 @@ const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
     dispatch(setCurrentIndex(updatedIndex))
   }
 
-  const { height, width } = useChartResize(swipe, loading)
+  const { height, width } = useChartResize(swipe, false)
 
   useEffect(() => {
     function initIndex() {

src/components/Hooks/useKonnectorAuth.tsx

@@ -12,7 +12,6 @@ import {
 import { useState } from 'react'
 import AccountService from 'services/account.service'
 import ConnectionService from 'services/connection.service'
-import { setLoading } from 'store/chart/chart.slice'
 import { updateFluidConnection } from 'store/global/global.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import logApp from 'utils/logger'
@@ -103,8 +102,6 @@ const useKonnectorAuth = (
         trigger: trigger,
         shouldLaunchKonnector: true,
       }
-      // TODO this should be dispatched
-      setLoading(false)
       dispatch(
         updateFluidConnection({
           fluidType: currentFluidStatus.fluidType,
@@ -112,7 +109,6 @@ const useKonnectorAuth = (
         })
       )
     } catch (error) {
-      setLoading(false)
       logApp.error(error)
       Sentry.captureException(error)
     }
@@ -148,7 +144,6 @@ const useKonnectorAuth = (
         )
       }
     } catch (error) {
-      setLoading(false)
       logApp.error(error)
       Sentry.captureException(error)
     }

src/models/chart.model.ts

@@ -7,7 +7,6 @@ export interface ChartState {
   currentDatachartIndex: number
   currentIndex: number
   currentTimeStep: TimeStep
-  loading: boolean
   selectedDate: DateTime
   showCompare: boolean
   showOfflineData: boolean

src/store/chart/chart.slice.spec.ts

@@ -8,7 +8,6 @@ import {
   setCurrentDataChartIndex,
   setCurrentIndex,
   setCurrentTimeStep,
-  setLoading,
   setSelectedDate,
   setShowCompare,
 } from './chart.slice'
@@ -100,16 +99,6 @@ describe('chart reducer', () => {
     })
   })
 
-  describe('setLoading', () => {
-    it('should handle setLoading with payload', () => {
-      const state = chartSlice.reducer(mockChartState, setLoading(false))
-      expect(state).toEqual({
-        ...mockChartState,
-        loading: false,
-      })
-    })
-  })
-
   describe('setShowCompare', () => {
     it('should handle setShowCompare', () => {
       const state = chartSlice.reducer(mockChartState, setShowCompare(true))

src/store/chart/chart.slice.ts

@@ -11,7 +11,6 @@ const initialState: ChartState = {
   currentIndex: 0,
   currentDatachart: { actualData: [], comparisonData: null },
   currentDatachartIndex: 0,
-  loading: true,
   showCompare: false,
   showOfflineData: false,
 }
@@ -35,9 +34,6 @@ export const chartSlice = createSlice({
         state.showCompare = false
       }
     },
-    setLoading: (state, action: PayloadAction<boolean>) => {
-      state.loading = action.payload
-    },
     setSelectedDate: (state, action: PayloadAction<DateTime>) => {
       state.selectedDate = action.payload
     },
@@ -55,7 +51,6 @@ export const {
   setCurrentDataChartIndex,
   setCurrentIndex,
   setCurrentTimeStep,
-  setLoading,
   setSelectedDate,
   setShowCompare,
   setShowOfflineData,

tests/__mocks__/store/chart.state.mock.ts

@@ -10,7 +10,6 @@ export const mockChartState: ChartState = {
   currentIndex: 0,
   currentDatachart: { actualData: [], comparisonData: null },
   currentDatachartIndex: 0,
-  loading: true,
   showCompare: false,
   showOfflineData: false,
 }