Added dynamic imports to the translation.

src/contexts/AppContext.ts

@@ -1,21 +1,21 @@
 import { createContext } from 'react';
 import { DeviceEnum } from '../enums/Device';
 import { LanguageEnum } from '../enums/Language';
-import { EN_US } from '../languages/enUS';
+import { TranslationType } from '../languages/enUS';
 
 interface AppContextProps {
   deviceInfos?: {
     device: DeviceEnum;
     bodyWidth?: number;
   };
-  TRANSLATION: typeof EN_US;
+  TRANSLATION?: TranslationType;
   language: LanguageEnum;
   theme: 'dark' | 'light';
 }
 
 export const AppContext = createContext<AppContextProps>({
   deviceInfos: { device: DeviceEnum.MOBILE },
-  TRANSLATION: EN_US,
+  TRANSLATION: undefined,
   language: LanguageEnum.English,
   theme: 'dark',
 });

src/hooks/useTranslation.ts

@@ -1,17 +1,22 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { LanguageEnum } from '../enums/Language';
-import { DE_DE } from '../languages/deDE';
-import { EN_US } from '../languages/enUS';
-import { PT_BR } from '../languages/ptBR';
+import EN_US, { TranslationType } from '../languages/enUS';
 
 export default function useTranslation() {
   const [language, setLanguage] = useState<LanguageEnum>(LanguageEnum.English);
+  const filePath =
+    '../languages/' +
+    {
+      [LanguageEnum.English]: 'enUS',
+      [LanguageEnum.German]: 'deDE',
+      [LanguageEnum.Portuguese]: 'ptBR',
+    }[language];
 
-  const TRANSLATION = {
-    [LanguageEnum.English]: EN_US,
-    [LanguageEnum.German]: DE_DE,
-    [LanguageEnum.Portuguese]: PT_BR,
-  }[language];
+  const [TRANSLATION, setTranslation] = useState<TranslationType>(EN_US);
+
+  useEffect(() => {
+    import(filePath).then(({ default: translation }) => setTranslation(translation));
+  }, [filePath]);
 
   return { TRANSLATION, language, setLanguage };
 }

src/languages/deDE.ts

@@ -1,4 +1,4 @@
-export const DE_DE = {
+const DE_DE = {
   CETEM_DESCRIPTION_P1: `Entwicklung von einem Python-basierten Algorithmus für die Trennung der Metalle der Seltenen Erde.`,
   CETEM_DESCRIPTION_P2: `Gewinn der Preis für die "Beste Studentischer Forscher Arbeit" der Institution in zwei konsekutiven Jahren.`,
   CETEM: 'CETEM (Zentrum für Mineraltechnologien)',
@@ -35,3 +35,6 @@ export const DE_DE = {
   VERSIONING: 'Versionierung',
   WORK_EXPERIENCE: 'Berufserfahrung',
 };
+
+export default DE_DE;
+console.log('de de was downloaded');

src/languages/enUS.ts

@@ -1,4 +1,4 @@
-export const EN_US = {
+const EN_US = {
   CETEM_DESCRIPTION_P1: 'Developed a Python-based algorithm for rare-earth elements separation.',
   CETEM_DESCRIPTION_P2: 'Won the Institution\'s "Best Undergraduate Research Award" for two years consecutively.',
   CETEM: 'CETEM (Center for Mineral Technologies)',
@@ -35,3 +35,7 @@ export const EN_US = {
   VERSIONING: 'Versioning',
   WORK_EXPERIENCE: 'Work Experience',
 };
+
+export default EN_US;
+export type TranslationType = typeof EN_US;
+console.log('en us was downloaded');

src/languages/ptBR.ts

@@ -1,4 +1,4 @@
-export const PT_BR = {
+const PT_BR = {
   CETEM_DESCRIPTION_P1: 'Desenvolvi um algoritmo em Python para a separação de elementos de terras-raras.',
   CETEM_DESCRIPTION_P2: 'Ganhei o prêmio de "Destaque em Iniciação Científica/Tecnológica" dois anos consecutivos.',
   CETEM: 'CETEM (Centro de Tecnologia Mineral)',
@@ -36,3 +36,6 @@ export const PT_BR = {
   VERSIONING: 'Versionamento',
   WORK_EXPERIENCE: 'Experiência',
 };
+
+export default PT_BR;
+console.log('pt br was downloaded');