SplashScreen.tsx

import logoLoading from 'assets/anims/logoLoading.gif'
import logos from 'assets/png/logos_partenaires.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { InitSteps } from 'models'
import React from 'react'
import './splashScreen.scss'

const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
  const { t } = useI18n()
  const getProgress = () => {
    const total = Object.values(InitSteps).length / 2
    const progress = initStep === 0 ? 10 : Math.round((initStep / total) * 100)
    return progress - 90 /* hack to make the progress bar start way left */
  }
  return (
    <>
      <div className="splash-content">
        <div className="splash-loader">
          <img src={logoLoading} alt="Chargement" />
          <span>Ecolyo</span>
          <div className="splash-progress">
            <div className="splash-progress-bar-container">
              <div
                className="splash-progress-bar-content"
                style={{ left: `${getProgress()}%` }}
              />
            </div>
          </div>
        </div>
        <div className="step-label text-18-normal">
          {t(`splashscreen.step.${initStep}`)}
        </div>
        <div className="splash-logos-container">
          <img src={logos} alt="ensemble de logos" />
        </div>
      </div>
    </>
  )
}

export default SplashScreen