From 790e83f9380a5464f0d628e456a4279aabdddb49 Mon Sep 17 00:00:00 2001
From: arnaud <arnaud.langlade@gmail.com>
Date: Fri, 3 Nov 2023 12:47:00 +0100
Subject: [PATCH] feat(loading): add loading page

---
 app/loading.tsx                           |  9 +++++++++
 app/tools/design-system/loader.module.css | 21 +++++++++++++++++++++
 app/tools/design-system/loader.tsx        | 11 +++++++++++
 app/tools/i18n/translation/en.ts          |  1 +
 app/tools/i18n/translation/fr.ts          |  1 +
 5 files changed, 43 insertions(+)
 create mode 100644 app/loading.tsx
 create mode 100644 app/tools/design-system/loader.module.css
 create mode 100644 app/tools/design-system/loader.tsx

diff --git a/app/loading.tsx b/app/loading.tsx
new file mode 100644
index 0000000..6dd6e60
--- /dev/null
+++ b/app/loading.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import Loader from '@/tools/design-system/loader';
+import { Translation } from '@/tools/i18n/intl-provider';
+
+export default function Loading() {
+  return (
+    <Loader text={<Translation id="loading" />} />
+  );
+}
diff --git a/app/tools/design-system/loader.module.css b/app/tools/design-system/loader.module.css
new file mode 100644
index 0000000..c210647
--- /dev/null
+++ b/app/tools/design-system/loader.module.css
@@ -0,0 +1,21 @@
+.loadingContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.loadingSpinner {
+    border: 6px solid rgba(255, 255, 255, 0.3);
+    border-top: 6px solid #0070f3;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/app/tools/design-system/loader.tsx b/app/tools/design-system/loader.tsx
new file mode 100644
index 0000000..8ff2939
--- /dev/null
+++ b/app/tools/design-system/loader.tsx
@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import styles from './loader.module.css';
+
+export default function Loader({ text }: { text: ReactNode }) {
+  return (
+    <div className={styles.loadingContainer}>
+      <div className={styles.loadingSpinner} />
+      <p>{text}</p>
+    </div>
+  );
+}
diff --git a/app/tools/i18n/translation/en.ts b/app/tools/i18n/translation/en.ts
index a1451b2..b65514b 100644
--- a/app/tools/i18n/translation/en.ts
+++ b/app/tools/i18n/translation/en.ts
@@ -4,6 +4,7 @@ const translationEn: Translations = {
   test: 'test en',
   add: 'Add',
   cancel: 'Cancel',
+  loading: 'Loading...',
   'mikado-graph.start': 'Start a task',
   'mikado-graph.done': 'Great! You have completed your task!',
   'mikado-graph.error.emptyGoal': 'The goal cannot be empty',
diff --git a/app/tools/i18n/translation/fr.ts b/app/tools/i18n/translation/fr.ts
index bdb5d11..e722b31 100644
--- a/app/tools/i18n/translation/fr.ts
+++ b/app/tools/i18n/translation/fr.ts
@@ -4,6 +4,7 @@ const translationFr: Translations = {
   test: 'test fr',
   add: 'Ajouter',
   cancel: 'Annuler',
+  loading: 'Chargement...',
   'mikado-graph.start': 'Démarrer une tâche',
   'mikado-graph.done': 'Super ! Vous avez terminé votre tâche !',
   'mikado-graph.error.emptyGoal': 'L\'objectif ne peut pas être vide',