import React, { useContext } from 'react' import Lottie from 'react-lottie' import Fade from '@material-ui/core/Fade' import { translate } from 'cozy-ui/react/I18n' import { AppContext } from 'components/Contexts/AppContextProvider' import StyledButton from 'components/CommonKit/Button/StyledButton' import * as loadingData from 'assets/anims/bounceloading.json' import * as doneData from 'assets/anims/doneloading.json' import * as errorData from 'assets/anims/errorloading.json' const loadingOptions = { loop: true, autoplay: true, animationData: loadingData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, } const successOption = { loop: false, autoplay: true, animationData: doneData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, } const errorOption = { loop: false, autoplay: true, animationData: errorData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, } interface LoadingStepProps { stepLabel: string loaded: boolean | null startCondition: boolean } const LoadingStep: React.FC<LoadingStepProps> = ({ stepLabel, loaded, startCondition, }: LoadingStepProps) => { return ( <div className="splash-step"> {(startCondition || loaded !== null) && ( <Fade in={startCondition} timeout={1000}> <> <div className="splash-step-text text-18-medium">{stepLabel}</div> <div className="splash-step-icon"> {loaded === null ? ( <Lottie options={loadingOptions} height={50} width={50} /> ) : loaded ? ( <Lottie options={successOption} height={90} width={90} /> ) : ( <Lottie options={errorOption} height={90} width={90} /> )} </div> </> </Fade> )} </div> ) } interface SplashContainerProps { t: Function } const SplashContainer: React.FC<SplashContainerProps> = ({ t, }: SplashContainerProps) => { const appContext = useContext(AppContext) return ( <div className="splash-root"> <div className="splash-header text-21-bold">{t('COMMON.APP_TITLE')}</div> <div className="splash-content"> <LoadingStep stepLabel={t('LOADING.INDEX')} loaded={appContext.isIndexesLoadingSuccess} startCondition={appContext.isIndexesLoading} /> <LoadingStep stepLabel={t('LOADING.DATA')} loaded={appContext.isDataLoadingSuccess} startCondition={appContext.isDataLoading} /> <LoadingStep stepLabel={t('LOADING.FLUIDTYPES')} loaded={appContext.isFluidTypesLoadingSuccess} startCondition={appContext.isFluidTypesLoading} /> <LoadingStep stepLabel={t('LOADING.CHALLENGE')} loaded={appContext.isCurrentChallengeUpdateLoadingSuccess} startCondition={appContext.isCurrentChallengeUpdateLoading} /> </div> <div className="splash-footer"> {appContext.isError && ( <> <div className="splash-footer-error-text text-16-normal"> {t('LOADING.ERROR_LOADING')} </div> <StyledButton className="splash-footer-button" onClick={() => window.location.reload()} > {t('LOADING.RELOAD')} </StyledButton> </> )} </div> </div> ) } export default translate()(SplashContainer)