feat(loading): add loading page

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" />} />
+  );
+}

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); }
+}

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>
+  );
+}

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',

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',