Skip to content
Snippets Groups Projects
SplashContainer.tsx 1.4 KiB
Newer Older
  • Learn to ignore specific revisions
  • Hugo NOUTS's avatar
    Hugo NOUTS committed
    import React, { useContext } from 'react'
    import Lottie from 'react-lottie'
    import { translate } from 'cozy-ui/react/I18n'
    import { AppContext } from 'components/Contexts/AppContextProvider'
    import StyledButton from 'components/CommonKit/Button/StyledButton'
    
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import * as loadingData from 'assets/anims/splash.json'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    const loadingOptions = {
      loop: true,
      autoplay: true,
      animationData: loadingData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    }
    
    interface SplashContainerProps {
      t: Function
    }
    
    const SplashContainer: React.FC<SplashContainerProps> = ({
      t,
    }: SplashContainerProps) => {
      const appContext = useContext(AppContext)
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      return (
        <div className="splash-root">
          <div className="splash-content">
    
    Yoan VALLET's avatar
    Yoan VALLET committed
            <Lottie
              options={loadingOptions}
    
    Romain CREY's avatar
    Romain CREY committed
              height={300}
              width={300}
    
    Yoan VALLET's avatar
    Yoan VALLET committed
              isStopped={appContext.isError}
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
            />
          </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)