From 0e4eb605295b7692c352ddeeba9e0ea341d41b87 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 26 May 2020 17:10:31 +0200
Subject: [PATCH] feat: design konnector loading

---
 .../Konnector/KonnectorLoading.tsx            | 34 ++++++++++++++++---
 .../Konnector/KonnectorResult.tsx             |  2 +-
 src/locales/en.json                           |  4 ++-
 src/styles/components/_konnector.scss         | 11 ++++++
 4 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/components/ContentComponents/Konnector/KonnectorLoading.tsx b/src/components/ContentComponents/Konnector/KonnectorLoading.tsx
index 54aca4baa..4df37acf2 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLoading.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLoading.tsx
@@ -1,12 +1,36 @@
 import React from 'react'
+import { translate } from 'cozy-ui/react/I18n'
+import Lottie from 'react-lottie'
 
-const KonnectorLoading = () => {
+import * as loadingData from 'assets/anims/bounceloading.json'
+
+const loadingOptions = {
+  loop: true,
+  autoplay: true,
+  animationData: loadingData,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice',
+  },
+}
+
+interface KonnectorLoadingProps {
+  t: Function
+}
+
+const KonnectorLoading: React.FC<KonnectorLoadingProps> = ({
+  t,
+}: KonnectorLoadingProps) => {
   return (
-    <div>
-      Vos données sont en cours de rappatriement. Ce traitement peut prendre
-      plusieurs minutes, merci de patienter.
+    <div className="kload-content">
+      <Lottie options={loadingOptions} height={50} width={50} />
+      <div className="kload-content-text text-16-normal">
+        <div>{t('KONNECTORCONFIG.PLZ_WAIT')}</div>
+      </div>
+      <div className="kload-content-text text-16-normal">
+        <div>{t('KONNECTORCONFIG.LOADING_DATA')}</div>
+      </div>
     </div>
   )
 }
 
-export default KonnectorLoading
+export default translate()(KonnectorLoading)
diff --git a/src/components/ContentComponents/Konnector/KonnectorResult.tsx b/src/components/ContentComponents/Konnector/KonnectorResult.tsx
index 408d6969c..f322a5f90 100644
--- a/src/components/ContentComponents/Konnector/KonnectorResult.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorResult.tsx
@@ -20,7 +20,7 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
   updateKonnector,
   deleteAccount,
   t,
-}) => {
+}: KonnectorResultProps) => {
   return (
     <div>
       <div className="accordion-update">
diff --git a/src/locales/en.json b/src/locales/en.json
index fec5dcd50..85fbb46a6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -115,7 +115,9 @@
     "BTN_INSTALL": "Installer",
     "BTN_CONFIGURE": "Configurer",
     "BTN_UPDATE": "Mettre à jour",
-    "BTN_DELETE": "Supprimer"
+    "BTN_DELETE": "Supprimer",
+    "LOADING_DATA": "Vos premières données seront disponibles dans quelques minutes et les prochaines données seront chargées automatiquement.",
+    "PLZ_WAIT": "Veuillez patienter..."
   },
   "INDICATOR": {
     "DISPLAY_OTHER_FLUID": "Voir",
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index 151e7547b..db808a985 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -105,6 +105,7 @@
   }
 }
 
+// KonnectorOAuthForm
 .koauthform{
   .koauthform-text{
     color: $text-bright;
@@ -115,6 +116,16 @@
   }
 }
 
+// KonnectorLoading
+.kload-content {
+  margin: 0.5rem 0;
+  .kload-content-text {
+    text-align: center;
+    color: $text-bright;
+    margin: 1rem 0;
+  }
+}
+
 .state-icon {
   height: 22px;
   width: 22px;
-- 
GitLab