added loading

src/i18n.js

@@ -3,16 +3,13 @@ import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
 
-// the translations
-// (tip move them in a JSON file and import them,
-// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
-
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
   .use(LanguageDetector)
   .use(Backend)
   .init({
     debug: true,
+    supportedLngs: ["en", "de"],
     fallbackLng: "en",
     interpolation: {
       escapeValue: false, // react already safes from xss

src/index.css

@@ -12,3 +12,27 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+#loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#loading text {
+  stroke: #e67e22;
+  font-size: 300px;
+  font-weight: 700;
+  stroke-width: 10;
+  animation: textAnimate 0.5s;
+}
+
+@keyframes textAnimate {
+  0% {
+    stroke-dasharray: 0 50%;
+  }
+  100% {
+    stroke-dasharray: 50% 0;
+  }
+}

src/index.js

@@ -6,9 +6,19 @@ import { BrowserRouter } from "react-router-dom";
 import "./i18n";
 //import reportWebVitals from './reportWebVitals';
 
+const Loading = () => {
+  return (
+    <svg id="loading" viewBox="0 0 1350 600">
+      <text x="50%" y="50%" fill="transparent" textAnchor="middle">
+        JANEX
+      </text>
+    </svg>
+  );
+};
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.Suspense fallback="loading">
+  <React.Suspense fallback={<Loading />}>
     <BrowserRouter>
       <App />
     </BrowserRouter>