SplashContainer.tsx

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)