diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index 1e9943f9ddec493ea1ee28588afbfe07ee83787e..ea850893ab874a7aa107c2fa97dc32c30b2aa659 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -1,30 +1,30 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { useHistory } from 'react-router-dom'
-import { FluidType } from 'enum/fluid.enum'
-import { PerformanceIndicator, Profile } from 'models'
-import { MonthlyForecast, ProfileType } from 'models/profileType.model'
-import './analysisConsumption.scss'
-import Button from '@material-ui/core/Button'
-import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import ProfileTypeService from 'services/profileType.service'
-import { Client, useClient } from 'cozy-client'
-import { DateTime } from 'luxon'
-import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import {
Accordion,
AccordionDetails,
AccordionSummary,
} from '@material-ui/core'
-import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
+import Button from '@material-ui/core/Button'
+import chevronDown from 'assets/icons/ico/chevron-down.svg'
import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
-import chevronDown from 'assets/icons/ico/chevron-down.svg'
+import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
+import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import Loader from 'components/Loader/Loader'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { FluidType } from 'enum/fluid.enum'
+import { DateTime } from 'luxon'
+import { PerformanceIndicator, Profile } from 'models'
+import { MonthlyForecast, ProfileType } from 'models/profileType.model'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import ProfileTypeService from 'services/profileType.service'
+import ProfileTypeEntityService from 'services/profileTypeEntity.service'
+import { AppStore } from 'store'
+import './analysisConsumption.scss'
interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator
@@ -189,7 +189,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
profileNotCompleted()
) : isLoading ? (
<div className="loader-container">
- <StyledSpinner size="5em" fluidType={FluidType.ELECTRICITY} />
+ <Loader color="elec" />
</div>
) : (
<>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index 196f4cfd77c013f77891b8933e316ee804922f4e..c80479c0bc760ddccb18ae119e6c473b47f096f0 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -2,9 +2,9 @@ import IconButton from '@material-ui/core/IconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
import MinIcon from 'assets/icons/ico/minimum.svg'
-import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import ElecHalfHourChart from 'components/Analysis/ElecHalfHourChart'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -175,12 +175,12 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
onClick={handleChangeWeek}
className="arrow-next"
>
- <Icon icon={RigthArrowIcon} size={24} />
+ <Icon icon={RightArrowIcon} size={24} />
</IconButton>
</div>
{isLoading && (
<div className="loader-container">
- <StyledSpinner size="5em" fluidType={FluidType.ELECTRICITY} />
+ <Loader color="elec" />
</div>
)}
{!isLoading && (
diff --git a/src/components/Analysis/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard.tsx
index 8b72fa68c6d64f2180034bbbd8ba1b538badb63d..b8bb9c6deb9d1678a4f52033108c2c9736756ffc 100644
--- a/src/components/Analysis/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard.tsx
@@ -1,23 +1,23 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import IconButton from '@material-ui/core/IconButton'
+import GraphIcon from 'assets/icons/ico/graph-icon.svg'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
-import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import IconButton from '@material-ui/core/IconButton'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import GraphIcon from 'assets/icons/ico/graph-icon.svg'
import { FluidType } from 'enum/fluid.enum'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { getNavPicto } from 'utils/picto'
-import { DateTime } from 'luxon'
-import { useClient } from 'cozy-client'
import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
import { Dataload, TimePeriod } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import ConsumptionDataManager from 'services/consumption.service'
-import './maxConsumptionCard.scss'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import { AppStore } from 'store'
+import { getNavPicto } from 'utils/picto'
import { formatNumberValues } from 'utils/utils'
+import './maxConsumptionCard.scss'
interface MaxConsumptionCardProps {
analysisDate: DateTime
@@ -33,10 +33,10 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
const [index, setIndex] = useState<number>(0)
const [maxDayData, setMaxDayData] = useState<Dataload | null>(null)
- const [isLoading, setisLoading] = useState<boolean>(false)
+ const [isLoading, setIsLoading] = useState<boolean>(false)
const handleChangePrevFluid = useCallback(() => {
- setisLoading(true)
+ setIsLoading(true)
if (index === 0) {
setIndex(fluidTypes.length - 1)
} else {
@@ -45,7 +45,7 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
}, [fluidTypes, index])
const handleChangeNextFluid = useCallback(() => {
- setisLoading(true)
+ setIsLoading(true)
if (index === fluidTypes.length - 1) {
setIndex(0)
} else {
@@ -56,7 +56,7 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
useEffect(() => {
let subscribed = true
async function getMaxLoadData() {
- setisLoading(true)
+ setIsLoading(true)
const timePeriod: TimePeriod = {
startDate: analysisDate.minus({ month: 1 }).startOf('month'),
endDate: analysisDate.minus({ month: 1 }).endOf('month'),
@@ -75,7 +75,7 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
} else {
setMaxDayData(null)
}
- setisLoading(false)
+ setIsLoading(false)
}
if (subscribed) {
getMaxLoadData()
@@ -111,14 +111,12 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
onClick={handleChangeNextFluid}
className="arrow-next"
>
- <Icon icon={RigthArrowIcon} size={24} />
+ <Icon icon={RightArrowIcon} size={24} />
</IconButton>
)}
</div>
<div className="data-container">
- {isLoading && (
- <StyledSpinner size="3em" fluidType={fluidTypes[index]} />
- )}
+ {isLoading && <Loader fluidType={fluidTypes[index]} />}
{!isLoading && (
<>
{!maxDayData && (
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 617818b2b59a750ed9eceb4fa8a955c961887f17..ee59f2a5d1b96b51cc4346d3e94fcb33c43d3e13 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -1,23 +1,22 @@
-import React, { useEffect, useState } from 'react'
+import Loader from 'components/Loader/Loader'
+import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
import { useClient } from 'cozy-client'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import './monthlyanalysis.scss'
-
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
import { PerformanceIndicator } from 'models'
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
-import PerformanceIndicatorService from 'services/performanceIndicator.service'
import ConfigService from 'services/fluidConfig.service'
-import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
+import PerformanceIndicatorService from 'services/performanceIndicator.service'
+import { AppStore } from 'store'
import AnalysisConsumption from './AnalysisConsumption'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import AnalysisErrorModal from './AnalysisErrorModal'
-import { DateTime } from 'luxon'
+import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
import MaxConsumptionCard from './MaxConsumptionCard'
+import './monthlyanalysis.scss'
import TotalAnalysisChart from './TotalAnalysisChart'
-import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
interface MonthlyAnalysisProps {
analysisDate: DateTime
@@ -111,7 +110,7 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
<>
{!isLoaded && (
<div className="analysis-container-spinner" aria-busy="true">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ <Loader />
</div>
)}
{isLoaded && (
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index aa6db9b163ea4077f9f493329b3ac7340889d78f..586a2c3710ae00b0c960995a20c1b8fc3917d90d 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -6,7 +6,7 @@ import defaultIcon from 'assets/icons/visu/duel/default.svg'
import duelLocked from 'assets/icons/visu/duel/locked.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
+import Loader from 'components/Loader/Loader'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserActionState } from 'enum/userAction.enum'
@@ -234,7 +234,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
<button className="smallCard goDuel" onClick={goDuel}>
{isLoading ? (
<div className="spinner-container">
- <StyledBlackSpinner className="duel-spinner" size={46} />
+ <Loader color="black" />
</div>
) : (
<>
diff --git a/src/components/CommonKit/Spinner/Spinner.spec.tsx b/src/components/CommonKit/Spinner/Spinner.spec.tsx
deleted file mode 100644
index ff1327a0d2a4de39ce9adf447cb383808841a78b..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/Spinner.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import Spinner from './Spinner'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-describe('Spinner component test ', () => {
- const mockProps = {
- size: 14,
- }
-
- it('should render correctly Spinner', () => {
- const wrapper = mount(<Spinner size={mockProps.size} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Spinner/Spinner.tsx b/src/components/CommonKit/Spinner/Spinner.tsx
deleted file mode 100644
index 6c9ab1f66946f964deab153a9a3ffe131a6d88c0..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import CircularProgress from '@material-ui/core/CircularProgress'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-
-interface SpinnerProps {
- size: number | string
-}
-
-const Spinner: React.FC<SpinnerProps> = ({ size }: SpinnerProps) => {
- const { t } = useI18n()
- return (
- <CircularProgress
- size={size}
- aria-label={t('common.accessibility.loading')}
- title={t('common.accessibility.loading')}
- />
- )
-}
-
-export default Spinner
diff --git a/src/components/CommonKit/Spinner/StyledBlackSpinner.spec.tsx b/src/components/CommonKit/Spinner/StyledBlackSpinner.spec.tsx
deleted file mode 100644
index 80e83b0a9ff734e3f0d96d12e41d2038a43028ee..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/StyledBlackSpinner.spec.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { mount } from 'enzyme'
-import React from 'react'
-
-import StyledBlackSpinner from './StyledBlackSpinner'
-
-describe('StyledBlackSpinner component test', () => {
- it('should render correclty StyledBlackSpinner', () => {
- const wrapper = mount(<StyledBlackSpinner />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Spinner/StyledBlackSpinner.tsx b/src/components/CommonKit/Spinner/StyledBlackSpinner.tsx
deleted file mode 100644
index 20b05258f6c7b6fac818b877187f3307704d4ece..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/StyledBlackSpinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { withStyles } from '@material-ui/core/styles'
-import MuiCircularProgress, {
- CircularProgressProps,
-} from '@material-ui/core/CircularProgress'
-
-const SpinnerBase = withStyles({
- root: {
- color: 'var(--black)',
- },
-})(MuiCircularProgress) as React.FC<CircularProgressProps>
-
-type StyledBlackSpinnerProps = CircularProgressProps
-
-const StyledBlackSpinner: React.FC<StyledBlackSpinnerProps> = ({
- ...props
-}: StyledBlackSpinnerProps) => {
- return <SpinnerBase {...props} />
-}
-
-export default StyledBlackSpinner
diff --git a/src/components/CommonKit/Spinner/StyledEcogestureSpinner.tsx b/src/components/CommonKit/Spinner/StyledEcogestureSpinner.tsx
deleted file mode 100644
index 8e2c796cfa149d8efe134befa0ef6dfbcd8bc99e..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/StyledEcogestureSpinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { withStyles } from '@material-ui/core/styles'
-import MuiCircularProgress, {
- CircularProgressProps,
-} from '@material-ui/core/CircularProgress'
-
-const SpinnerBase = withStyles({
- root: {
- color: 'var(--blue)',
- },
-})(MuiCircularProgress) as React.FC<CircularProgressProps>
-
-type StyledSpinnerProps = CircularProgressProps
-
-const StyledEcogestureSpinner: React.FC<StyledSpinnerProps> = ({
- ...props
-}: StyledSpinnerProps) => {
- return <SpinnerBase {...props} />
-}
-
-export default StyledEcogestureSpinner
diff --git a/src/components/CommonKit/Spinner/StyledSpinner.spec.tsx b/src/components/CommonKit/Spinner/StyledSpinner.spec.tsx
deleted file mode 100644
index 684001d9787002e06522530afd7556c3c8dc9a50..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/StyledSpinner.spec.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import StyledSpinner from './StyledSpinner'
-import { FluidType } from 'enum/fluid.enum'
-
-describe('StyledSpinner component test', () => {
- it('should render correctly base StyledSpinner (with option home)', () => {
- const wrapper = mount(<StyledSpinner fluidType={FluidType.ELECTRICITY} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly base StyledSpinner with unknown FluidType', () => {
- const wrapper = mount(<StyledSpinner fluidType={99} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly Electricty StyledSpinner', () => {
- const wrapper = mount(<StyledSpinner fluidType={FluidType.ELECTRICITY} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly Water StyledSpinner', () => {
- const wrapper = mount(<StyledSpinner fluidType={FluidType.WATER} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly Gas StyledSpinner', () => {
- const wrapper = mount(<StyledSpinner fluidType={FluidType.GAS} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Spinner/StyledSpinner.tsx b/src/components/CommonKit/Spinner/StyledSpinner.tsx
deleted file mode 100644
index 1024efe943996dae8edc15cc90a221644d49a6aa..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/StyledSpinner.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import { FluidType } from 'enum/fluid.enum'
-import { withStyles } from '@material-ui/core/styles'
-import MuiCircularProgress, {
- CircularProgressProps,
-} from '@material-ui/core/CircularProgress'
-
-const SpinnerBase = withStyles({
- root: {
- color: 'var(--multiColor)',
- },
-})(MuiCircularProgress) as React.FC<CircularProgressProps>
-
-const SpinnerElec = withStyles({
- root: {
- color: 'var(--elecColor)',
- },
-})(MuiCircularProgress) as React.FC<CircularProgressProps>
-
-const SpinnerWater = withStyles({
- root: {
- color: 'var(--waterColor)',
- },
-})(MuiCircularProgress) as React.FC<CircularProgressProps>
-
-const SpinnerGas = withStyles({
- root: {
- color: 'var(--gasColor)',
- },
-})(MuiCircularProgress) as React.FC<CircularProgressProps>
-
-interface StyledSpinnerProps extends CircularProgressProps {
- fluidType: FluidType
-}
-
-const StyledSpinner: React.FC<StyledSpinnerProps> = ({
- fluidType,
- ...props
-}: StyledSpinnerProps) => {
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- return <SpinnerElec {...props} />
- case FluidType.WATER:
- return <SpinnerWater {...props} />
- case FluidType.GAS:
- return <SpinnerGas {...props} />
- case FluidType.MULTIFLUID:
- return <SpinnerBase {...props} />
- default:
- return <SpinnerBase {...props} />
- }
-}
-
-export default StyledSpinner
diff --git a/src/components/CommonKit/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/components/CommonKit/Spinner/__snapshots__/Spinner.spec.tsx.snap
deleted file mode 100644
index 1d209b97fa03772a710d1b4ca6edcaaf6610f659..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/__snapshots__/Spinner.spec.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Spinner component test should render correctly Spinner 1`] = `
-<Spinner
- size={14}
-/>
-`;
diff --git a/src/components/CommonKit/Spinner/__snapshots__/StyledBlackSpinner.spec.tsx.snap b/src/components/CommonKit/Spinner/__snapshots__/StyledBlackSpinner.spec.tsx.snap
deleted file mode 100644
index f37195d63a69872c3d7531c7c25996d9707e66d1..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/__snapshots__/StyledBlackSpinner.spec.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledBlackSpinner component test should render correclty StyledBlackSpinner 1`] = `<StyledBlackSpinner />`;
diff --git a/src/components/CommonKit/Spinner/__snapshots__/StyledSpinner.spec.tsx.snap b/src/components/CommonKit/Spinner/__snapshots__/StyledSpinner.spec.tsx.snap
deleted file mode 100644
index e0b7eb274e12bdd8fcd046ae9f283a24b4e5bdc9..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Spinner/__snapshots__/StyledSpinner.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledSpinner component test should render correctly Electricty StyledSpinner 1`] = `
-<StyledSpinner
- fluidType={0}
-/>
-`;
-
-exports[`StyledSpinner component test should render correctly Gas StyledSpinner 1`] = `
-<StyledSpinner
- fluidType={2}
-/>
-`;
-
-exports[`StyledSpinner component test should render correctly Water StyledSpinner 1`] = `
-<StyledSpinner
- fluidType={1}
-/>
-`;
-
-exports[`StyledSpinner component test should render correctly base StyledSpinner (with option home) 1`] = `
-<StyledSpinner
- fluidType={0}
-/>
-`;
-
-exports[`StyledSpinner component test should render correctly base StyledSpinner with unknown FluidType 1`] = `
-<StyledSpinner
- fluidType={99}
-/>
-`;
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index 33ff4dd0704254c0d3e1c401e61aab2004301619..c3560ac13c6d4128400fe0df8daa087362691340 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -1,8 +1,7 @@
import Button from '@material-ui/core/Button'
import warningWhite from 'assets/icons/ico/warning-white.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidState, FluidType } from 'enum/fluid.enum'
@@ -291,7 +290,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
label: 'text-16-normal',
}}
>
- {deleting && <StyledSpinner size="1rem" fluidType={fluidType} />}
+ {deleting && <Loader fluidType={fluidType} />}
{!deleting && t('konnector_form.button_delete')}
</Button>
<Button
@@ -307,7 +306,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
label: 'text-16-bold',
}}
>
- {updating && <StyledBlackSpinner size="1rem" />}
+ {updating && <Loader color="black" />}
{!updating && (
<div>
{konnectorError === 'error_update_oauth'
diff --git a/src/components/Connection/FormOAuth.tsx b/src/components/Connection/FormOAuth.tsx
index 3bb9b0b428df2039eb9557be6c47424951165fa3..eb30fdc6099d2abe8d632663cb5861be506d816c 100644
--- a/src/components/Connection/FormOAuth.tsx
+++ b/src/components/Connection/FormOAuth.tsx
@@ -1,18 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import './auth.scss'
-import { FluidStatus, Konnector } from 'models'
-import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
-import { getPartnerPicto } from 'utils/picto'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
+import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { FluidStatus, Konnector } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import { setShouldRefreshConsent } from 'store/global/global.actions'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import UsageEventService from 'services/usageEvent.service'
+import { getPartnerPicto } from 'utils/picto'
+import './auth.scss'
interface FormOAuthProps {
konnector: Konnector | null
@@ -100,7 +100,7 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
<div className="authform-button-content">
<div className="authform-button-content-icon">
{isWaiting ? (
- <StyledBlackSpinner size={48} />
+ <Loader color="black" />
) : (
<StyledIcon icon={icon} size={80} />
)}
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index ff14f1f74173d11f91fc91a5861725c5eaf6dd88..5a1936bad94e991a3dda66ffd4092045a3cab59e 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -1,23 +1,21 @@
-import React from 'react'
-import './datenavigator.scss'
+import IconButton from '@material-ui/core/IconButton'
+import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
+import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import classNames from 'classnames'
+import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
+import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import DateChartService from 'services/dateChart.service'
import { AppStore } from 'store'
import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.actions'
-import { DateTime } from 'luxon'
-import classNames from 'classnames'
-
-import DateChartService from 'services/dateChart.service'
import { isLastDateReached } from 'utils/date'
-
-import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
-import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
-import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
-import IconButton from '@material-ui/core/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { TimeStep } from 'enum/timeStep.enum'
import { isKonnectorActive } from 'utils/utils'
-import { FluidType } from 'enum/fluid.enum'
+import './datenavigator.scss'
interface DateNavigatorProps {
currentAnalysisDate?: DateTime
@@ -132,7 +130,7 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
})}
onClick={() => handleChangeNextIndex()}
>
- <Icon icon={RigthArrowIcon} size={16} />
+ <Icon icon={RightArrowIcon} size={16} />
</IconButton>
</div>
</div>
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index c09e4e0498c885a3c6766ebc494ae6fa18994dc5..e167d49ac0bd263e6feaed2841f15e4db3ebc78f 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -1,27 +1,26 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useClient } from 'cozy-client'
+import { Tab, Tabs } from '@material-ui/core'
+import classNames from 'classnames'
+import Content from 'components/Content/Content'
import EcogestureList from 'components/Ecogesture/EcogestureList'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import { Tabs, Tab } from '@material-ui/core'
-import './ecogestureView.scss'
-import classNames from 'classnames'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
import { Ecogesture } from 'models'
+import { ProfileEcogesture } from 'models/profileEcogesture.model'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory, useLocation } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
+import { AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
import { getSeason } from 'utils/utils'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import { FluidType } from 'enum/fluid.enum'
import EcogestureEmptyList from './EcogestureEmptyList'
-import { EcogestureStatus } from 'enum/ecogesture.enum'
import EcogestureInitModal from './EcogestureInitModal'
import EcogestureReinitModal from './EcogestureReinitModal'
-import { updateProfile } from 'store/profile/profile.actions'
-import { useHistory, useLocation } from 'react-router-dom'
-import { ProfileEcogesture } from 'models/profileEcogesture.model'
+import './ecogestureView.scss'
interface TabPanelProps {
children?: React.ReactNode
@@ -187,7 +186,7 @@ const EcogestureView: React.FC = () => {
{!isLoaded && (
<Content height={headerHeight}>
<div className="ecogesture-spinner" aria-busy="true">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ <Loader />
</div>
</Content>
)}
diff --git a/src/components/Ecogesture/SingleEcogesture.spec.tsx b/src/components/Ecogesture/SingleEcogesture.spec.tsx
index 892407ba79da1ed814d8262439feedb4b8161774..1c4cd286b5237908c5364e48b51c8a57b47c7498 100644
--- a/src/components/Ecogesture/SingleEcogesture.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.spec.tsx
@@ -31,9 +31,7 @@ jest.mock('components/Ecogesture/EfficientyRating', () => () => (
))
jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
-jest.mock('components/CommonKit/Spinner/StyledSpinner', () => () => (
- <div id="spinner"></div>
-))
+jest.mock('components/Loader/Loader', () => () => <div id="spinner"></div>)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
jest.mock('components/Content/Content', () => (props: any) => (
<div id="content">{props.children}</div>
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index 4f089add5159c554e6ae9988add975ee4bfc3332..2d49b1c0d8eb4314afad4ccecd907e33b907475d 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -1,31 +1,30 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import './singleEcogesture.scss'
-import classNames from 'classnames'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { AppStore } from 'store'
-import { useSelector } from 'react-redux'
-import useExploration from 'components/Hooks/useExploration'
-import { importIconbyId } from 'utils/utils'
-import EcogestureService from 'services/ecogesture.service'
import IconButton from '@material-ui/core/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { Ecogesture } from 'models'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import EfficientyRating from './EfficientyRating'
-import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import doingEnabledIcon from 'assets/icons/ico/doing-enabled.svg'
import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
-import objectiveEnabledIcon from 'assets/icons/ico/objective-enabled.svg'
+import doingEnabledIcon from 'assets/icons/ico/doing-enabled.svg'
import objectiveDisabledIcon from 'assets/icons/ico/objective-disabled.svg'
+import objectiveEnabledIcon from 'assets/icons/ico/objective-enabled.svg'
+import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import classNames from 'classnames'
+import ErrorPage from 'components/CommonKit/ErrorPage/ErrorPage'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
+import useExploration from 'components/Hooks/useExploration'
+import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
-import ErrorPage from 'components/CommonKit/ErrorPage/ErrorPage'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import { FluidType } from 'enum/fluid.enum'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
import { Location } from 'history'
+import { Ecogesture } from 'models'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useHistory, useLocation } from 'react-router-dom'
+import EcogestureService from 'services/ecogesture.service'
+import { AppStore } from 'store'
+import { importIconbyId } from 'utils/utils'
+import EfficientyRating from './EfficientyRating'
+import './singleEcogesture.scss'
interface SingleEcogestureProps {
match: { params: { id: string } }
@@ -133,7 +132,7 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
return (
<Content height={headerHeight}>
<div className="se-loader-container">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ <Loader />
</div>
</Content>
)
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
index 4d6d99ca21929de48c0845070944a44c21130222..6c9d81778a4947c8740c528210754d92536a5c28 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
@@ -527,10 +527,10 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
className="indicator-tab"
classes={
Object {
- "colorPrimary": "PrivateTabIndicator-colorPrimary-3",
- "colorSecondary": "PrivateTabIndicator-colorSecondary-4",
- "root": "PrivateTabIndicator-root-2",
- "vertical": "PrivateTabIndicator-vertical-5",
+ "colorPrimary": "PrivateTabIndicator-colorPrimary-2",
+ "colorSecondary": "PrivateTabIndicator-colorSecondary-3",
+ "root": "PrivateTabIndicator-root-1",
+ "vertical": "PrivateTabIndicator-vertical-4",
}
}
color="secondary"
@@ -543,7 +543,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
>
<span
- className="PrivateTabIndicator-root-2 PrivateTabIndicator-colorSecondary-4 indicator-tab"
+ className="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab"
style={
Object {
"left": 0,
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index 23dda80906d54d6babef45b41a01ca1238e0eba7..2e001b9fc2127c95c2b60a7dd8b8fda4ec4fd2f8 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -1,27 +1,26 @@
-import React, { useCallback, useEffect, useState } from 'react'
+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'
-import Content from 'components/Content/Content'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
+import Loader from 'components/Loader/Loader'
+import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
import {
- ProfileEcogestureAnswerType,
EcogestureStepForm,
+ ProfileEcogestureAnswerType,
} from 'enum/ecogestureForm.enum'
-import EcogestureFormSingleChoice from 'components/EcogestureForm/EcogestureFormSingleChoice'
-import EcogestureLaunchFormModal from 'components/EcogestureForm/EcogestureLaunchFormModal'
-import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
+import { Profile } from 'models'
import {
ProfileEcogesture,
ProfileEcogestureAnswer,
} from 'models/profileEcogesture.model'
-import { Profile } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
import ProfileEcogestureFormService from 'services/profileEcogestureForm.service'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import { FluidType } from 'enum/fluid.enum'
+import { AppStore } from 'store'
import './ecogestureFormView.scss'
-import { useLocation } from 'react-router-dom'
-import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
const EcogestureFormView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -92,7 +91,7 @@ const EcogestureFormView: React.FC = () => {
return (
<Content height={headerHeight}>
<div className="se-loader-container">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ <Loader />
</div>
</Content>
)
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 866bb07954f3b228000766ed24dd77102b885c49..1dd8fb2d7723aa408fd5c8e04bb628e1f9abb811 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -1,22 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import './ecogestureSelection.scss'
-import { ProfileEcogesture } from 'models/profileEcogesture.model'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { Ecogesture } from 'models'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
-import EcogestureService from 'services/ecogesture.service'
-import EcogestureSelectionModal from 'components/EcogestureSelection/EcogestureSelectionModal'
import EcogestureSelectionDetail from 'components/EcogestureSelection/EcogestureSelectionDetail'
-import EcogestureSelectionRestart from 'components/EcogestureSelection/EcogestureSelectionRestart'
import EcogestureSelectionEnd from 'components/EcogestureSelection/EcogestureSelectionEnd'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import { FluidType } from 'enum/fluid.enum'
+import EcogestureSelectionModal from 'components/EcogestureSelection/EcogestureSelectionModal'
+import EcogestureSelectionRestart from 'components/EcogestureSelection/EcogestureSelectionRestart'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Ecogesture } from 'models'
+import { ProfileEcogesture } from 'models/profileEcogesture.model'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
+import EcogestureService from 'services/ecogesture.service'
+import { AppStore } from 'store'
+import './ecogestureSelection.scss'
const EcogestureSelection: React.FC = () => {
const { t } = useI18n()
@@ -117,7 +116,7 @@ const EcogestureSelection: React.FC = () => {
return (
<Content height={headerHeight}>
<div className="eg-selection-loader">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ <Loader />
</div>
</Content>
)
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index ff1a4bc3cd0016ff7fac04fffe00890665d2b211..c3257a3245a907111dae927a396301085d141e53 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -1,20 +1,19 @@
-import useExploration from 'components/Hooks/useExploration'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import './fluidChart.scss'
-
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
import HalfHourNoData from 'components/HalfHourNoData/HalfHourNoData'
+import useExploration from 'components/Hooks/useExploration'
import TimeStepSelector from 'components/TimeStepSelector/TimeStepSelector'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { UsageEventType } from 'enum/usageEvent.enum'
import { UserExplorationID } from 'enum/userExploration.enum'
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
import UsageEventService from 'services/usageEvent.service'
+import { AppStore } from 'store'
+import './fluidChart.scss'
import FluidChartSwipe from './FluidChartSwipe'
interface FluidChartProps {
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 1959cbfab0b9db77cb825fe1ed4ccbb674312350..1a60fb84ad09dbba3a7183343d8b690536dddacb 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -1,20 +1,18 @@
-import React, { useState, useEffect } from 'react'
-import './fluidChartSlide.scss'
+import BarChart from 'components/Charts/BarChart'
+import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
+import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { setCurrentDatachart, setLoading } from 'store/chart/chart.actions'
-import { DateTime } from 'luxon'
-
import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
import { Datachart } from 'models'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
import DateChartService from 'services/dateChart.service'
-
-import BarChart from 'components/Charts/BarChart'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import { TimeStep } from 'enum/timeStep.enum'
-import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
+import { AppStore } from 'store'
+import { setCurrentDatachart, setLoading } from 'store/chart/chart.actions'
+import './fluidChartSlide.scss'
interface FluidChartSlideProps {
index: number
@@ -122,11 +120,9 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
return (
<div className={'fluidchartslide-root'} aria-busy={!isDataLoaded}>
{!isDataLoaded ? (
- <StyledSpinner
- size="5em"
- fluidType={fluidType}
- className="data-spinner"
- />
+ <div className="data-spinner">
+ <Loader fluidType={fluidType} />
+ </div>
) : (
<>
<ConsumptionVisualizer
diff --git a/src/components/FluidChart/fluidChartSlide.scss b/src/components/FluidChart/fluidChartSlide.scss
index cd629bab5d4e630bc397840ea8f3e94852a9db68..4e062f5b08335e1f8a0f279050e7ef9afd4a6650 100644
--- a/src/components/FluidChart/fluidChartSlide.scss
+++ b/src/components/FluidChart/fluidChartSlide.scss
@@ -11,6 +11,6 @@
min-height: 14rem;
}
.data-spinner {
- margin-top: 4rem;
+ margin-top: 5rem;
}
}
diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx
index 2999134ba5b3aa3bdb4b0024b447e1c6d185f485..63e4c5b66e0256d4d20b9beb77f5a9298c9bd0df 100644
--- a/src/components/Home/ConsumptionView.spec.tsx
+++ b/src/components/Home/ConsumptionView.spec.tsx
@@ -1,4 +1,4 @@
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import Loader from 'components/Loader/Loader'
import { FluidState, FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
@@ -106,7 +106,7 @@ describe('ConsumptionView component', () => {
expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
expect(wrapper.find('mock-header').exists()).toBeTruthy()
expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
- expect(wrapper.find(StyledSpinner).exists()).toBeTruthy()
+ expect(wrapper.find(Loader).exists()).toBeTruthy()
})
it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => {
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index d2ff3c66ed11f6960bcde245341bc141d15827f8..0ca0095e676d62565d6d6ce53bbcc8fc994ac8ed 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -1,41 +1,38 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import './consumptionView.scss'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import './consumptionView.scss'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
+import classNames from 'classnames'
+import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal'
import Content from 'components/Content/Content'
-import FluidChart from 'components/FluidChart/FluidChart'
+import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
import DateNavigator from 'components/DateNavigator/DateNavigator'
-import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
+import FluidChart from 'components/FluidChart/FluidChart'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
import ConsumptionDetails from 'components/Home/ConsumptionDetails'
import FluidButtons from 'components/Home/FluidButtons'
import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
-import classNames from 'classnames'
+import Loader from 'components/Loader/Loader'
+import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
+import { useClient } from 'cozy-client'
+import ProfileService from 'services/profile.service'
+import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
+import {
+ setCustomPopup,
+ setPartnersIssue,
+ showReleaseNotes,
+} from 'store/global/global.actions'
import {
getKonnectorUpdateError,
getTodayDate,
isKonnectorActive,
} from 'utils/utils'
import ReleaseNotesModal from './releaseNotesModal'
-import {
- setCustomPopup,
- setPartnersIssue,
- showReleaseNotes,
-} from 'store/global/global.actions'
-import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
-import ProfileService from 'services/profile.service'
-import { useClient } from 'cozy-client'
-import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal'
-import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
-import KonnectorModal from 'components/Konnector/KonnectorModal'
-
-import { KonnectorError } from 'enum/konnectorError.enum'
interface ConsumptionViewProps {
fluidType: FluidType
}
@@ -163,7 +160,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
<>
{loading && (
<div className={'consumptionview-loading'} aria-busy="true">
- <StyledSpinner size="5em" fluidType={fluidType} />
+ <Loader fluidType={fluidType} />
</div>
)}
<div
diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8b8d132d7898d08b4a1f532bebd9c0c0d8135b3
--- /dev/null
+++ b/src/components/Loader/Loader.scss
@@ -0,0 +1,52 @@
+@import 'src/styles/base/color';
+
+.loader {
+ height: 50px;
+ margin: auto;
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+
+ &.gold {
+ color: $gold;
+ }
+
+ &.gaz {
+ color: $gas-color;
+ }
+
+ &.elec {
+ color: $elec-color;
+ }
+
+ &.water {
+ color: $water-color;
+ }
+
+ &.black {
+ color: $dark;
+ }
+
+ .bar {
+ width: 10px;
+ border-radius: 5px;
+ background: currentColor;
+ // Negative delay to fix bar appearing after delay
+ animation: load 0.4s -0.4s linear infinite alternate;
+ &:nth-child(1) {
+ animation-delay: -0.1s;
+ }
+ &:nth-child(3) {
+ animation-delay: -0.55s;
+ }
+ }
+
+ @keyframes load {
+ 0% {
+ height: 20%;
+ }
+ 100% {
+ height: 100%;
+ }
+ }
+}
diff --git a/src/components/Loader/Loader.spec.tsx b/src/components/Loader/Loader.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..231c5b013606758b577ee2be1abef4973f99fa88
--- /dev/null
+++ b/src/components/Loader/Loader.spec.tsx
@@ -0,0 +1,36 @@
+import { FluidType } from 'enum/fluid.enum'
+import { mount } from 'enzyme'
+import React from 'react'
+import Loader from './Loader'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('Loader component', () => {
+ it('should render base Loader', () => {
+ const wrapper = mount(<Loader />)
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
+
+ it('should render Electricity Loader', () => {
+ const wrapper = mount(<Loader color="elec" />)
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
+
+ it('should render Water Loader', () => {
+ const wrapper = mount(<Loader fluidType={FluidType.WATER} />)
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
+
+ it('should render Gas Loader', () => {
+ const wrapper = mount(<Loader fluidType={FluidType.GAS} />)
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..09aef3ec4626b91e1cfd7f0cd8b29d7fa2bf9f77
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,47 @@
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enum/fluid.enum'
+import React from 'react'
+import './Loader.scss'
+
+interface color {
+ color?: 'gold' | 'gaz' | 'elec' | 'water' | 'black'
+ fluidType?: FluidType
+}
+
+/**
+ * Loader of Ecolyo, default color is gold
+ * @param color 'gold' | 'gaz' | 'elec' | 'water'
+ */
+const Loader = ({ color = 'gold', fluidType }: color) => {
+ const { t } = useI18n()
+
+ switch (fluidType) {
+ case FluidType.MULTIFLUID:
+ color = 'gold'
+ break
+ case FluidType.ELECTRICITY:
+ color = 'elec'
+ break
+ case FluidType.GAS:
+ color = 'gaz'
+ break
+ case FluidType.WATER:
+ color = 'water'
+ break
+ }
+
+ return (
+ <div
+ className={`loader ${color}`}
+ aria-busy="true"
+ aria-label={t('common.accessibility.loading')}
+ title={t('common.accessibility.loading')}
+ >
+ <div className="bar" />
+ <div className="bar" />
+ <div className="bar" />
+ </div>
+ )
+}
+
+export default Loader
diff --git a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..e33f3c5b6e55146c70713ded38d7342c604476ea
--- /dev/null
+++ b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader component should render Electricity Loader 1`] = `
+<Loader
+ color="elec"
+/>
+`;
+
+exports[`Loader component should render Gas Loader 1`] = `
+<Loader
+ fluidType={2}
+/>
+`;
+
+exports[`Loader component should render Water Loader 1`] = `
+<Loader
+ fluidType={1}
+/>
+`;
+
+exports[`Loader component should render base Loader 1`] = `<Loader />`;
diff --git a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
index eb0aca3e52f7a5ad175d58c688c1f9a4037dc2f4..0960911e61d9e891e68b6ec0cd13485e195df7b4 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import Button from '@material-ui/core/Button'
+import Loader from 'components/Loader/Loader'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import Button from '@material-ui/core/Button'
-import QuizExplanationModal from './QuizExplanationModal'
-import QuizCustomQuestionContent from './QuizCustomQuestionContent'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { questionEntity } from '../../../tests/__mocks__/quizData.mock'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledEcogestureSpinner'
+import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
+import QuizCustomQuestionContent from './QuizCustomQuestionContent'
+import QuizExplanationModal from './QuizExplanationModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -95,7 +95,7 @@ describe('QuizCustomQuestionContent component', () => {
/>
</Provider>
)
- expect(wrapper.find(StyledSpinner).exists()).toBeTruthy()
+ expect(wrapper.find(Loader).exists()).toBeTruthy()
})
it('should display QuizExplanationModal when click on Button', () => {
const store = mockStore({
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index aaf01eda04459383d30810d47581c3dc93d0a751..a5a38de7729980d4b2ac950bf59d1ba4d0c0cbf6 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -1,20 +1,20 @@
-import React, { useState } from 'react'
-import './quizQuestion.scss'
+import Button from '@material-ui/core/Button'
import CloseIcon from 'assets/icons/ico/close.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import Button from '@material-ui/core/Button'
+import Loader from 'components/Loader/Loader'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
+import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { Answer, QuestionEntity, UserChallenge, UserQuiz } from 'models'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
import ChallengeService from 'services/challenge.service'
import QuizService from 'services/quiz.service'
-import { Client, useClient } from 'cozy-client'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { useDispatch } from 'react-redux'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledEcogestureSpinner'
import UsageEventService from 'services/usageEvent.service'
-import { UsageEventType } from 'enum/usageEvent.enum'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import './quizQuestion.scss'
interface QuizCustomQuestionContent {
userChallenge: UserChallenge
@@ -100,7 +100,7 @@ const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
{isLoading ? (
<div className={'question-loading'} aria-busy="true">
- <StyledSpinner />
+ <Loader />
</div>
) : (
question && (