loading screen

public/locales/de/translation.json

@@ -70,6 +70,9 @@
       }
     }
   },
+  "app": {
+    "loading": "Lade Profil..."
+  },
   "pageNotFound": {
     "title": "Seite nicht gefunden",
     "subTitle": "Die Seite, die Sie besucht haben, existiert leider nicht.",

public/locales/en/translation.json

@@ -70,6 +70,9 @@
       } 
     }
   },
+  "app": {
+    "loading": "Loading profile..."
+  },
   "pageNotFound": {
     "title": "Page Not Found",
     "subTitle": "The page you visited does not exist.",

src/App.css

@@ -14,9 +14,3 @@
     content: unset;
   }
 }
-
-@media (min-width: 576px) {
-  .res {
-    display: none;
-  }
-}

src/App.js

@@ -1,7 +1,7 @@
 import "antd/dist/reset.css";
 import "./App.css";
 import Login from "./Pages/Login";
-import { Layout, Spin } from "antd";
+import { Layout, Space, Spin, Typography } from "antd";
 import { Constants, UseUserSession, myFetch } from "./utils";
 import DashboardLayout from "./Components/DashboardLayout";
 import SideBarProvider from "./Contexts/SideBarContext";
@@ -13,6 +13,50 @@ import { useEffect, useState } from "react";
 import StoresProvider from "./Contexts/StoresContext";
 import { clarity } from "react-microsoft-clarity";
 import { useTranslation } from "react-i18next";
+import { ReactComponent as ZeitAdler } from "./ZeitAdler.svg";
+
+export function Loading() {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center",
+        height: "100vh",
+      }}
+    >
+      <ZeitAdler
+        style={{
+          maxHeight: 100,
+        }}
+      />
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 20,
+        }}
+      >
+        <Spin />
+
+        <Typography.Title
+          level={3}
+          strong
+          style={{
+            letterSpacing: 2,
+            margin: 0,
+          }}
+        >
+          {t("app.loading")}
+        </Typography.Title>
+      </div>
+    </div>
+  );
+}
 
 export default function App() {
   /*const [notificationApi, notificationContextHolder] =
@@ -54,30 +98,7 @@ export default function App() {
   }
 
   if (appUserData === null) {
-    return (
-      <div
-        style={{
-          height: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 40,
-        }}
-        className="App"
-      >
-        <Spin size="large" />
-
-        <span
-          style={{
-            fontWeight: "bold",
-            fontSize: 24,
-            letterSpacing: 2,
-          }}
-        >
-          Lade Daten...
-        </span>
-      </div>
-    );
+    return <Loading />;
   }
 
   console.info(

src/Pages/UserProfile/index.js

@@ -17,6 +17,7 @@ import {
   RequestState,
   RequestStateItem,
 } from "../../Components/MyRequestStateItem";
+import { LogoutOutlined } from "@ant-design/icons";
 
 export default function UserProfile({ setUserSession }) {
   const { t, i18n } = useTranslation();
@@ -98,6 +99,7 @@ export default function UserProfile({ setUserSession }) {
             <Button
               type="primary"
               loading={isRequestingLogout}
+              icon={<LogoutOutlined />}
               onClick={() => {
                 setIsRequestingLogout(true);
 

src/index.css

@@ -1,7 +1,5 @@
 body {
   margin: 0;
-  /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;*/
   font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   -webkit-font-smoothing: antialiased;
@@ -13,34 +11,3 @@ 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;
-}
-
-#loading-init text {
-  animation: textAnimate 0.5s;
-}
-
-#loading-reconnecting text {
-  animation: textAnimate 1s infinite;
-}
-
-@keyframes textAnimate {
-  0% {
-    stroke-dasharray: 0 50%;
-  }
-  100% {
-    stroke-dasharray: 50% 0;
-  }
-}

src/index.js

@@ -1,35 +1,18 @@
-import React from "react";
+import { Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import App from "./App";
+import App, { Loading } from "./App";
 import { BrowserRouter } from "react-router-dom";
 import "./i18n";
 //import reportWebVitals from './reportWebVitals';
 
-const Loading = () => {
-  return (
-    <svg id="loading-init" className="loading" viewBox="0 0 1350 600">
-      <text x="50%" y="50%" fill="transparent" textAnchor="middle">
-        C O M P A N Y
-      </text>
-    </svg>
-  );
-};
-
-// TODO: Undo this
-/* 
-<text x="50%" y="50%" fill="transparent" textAnchor="middle">
-  J A N N E X
-</text>
-*/
-
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.Suspense fallback={<Loading />}>
+  <Suspense fallback={<Loading />}>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.Suspense>
+  </Suspense>
 );
 
 // If you want to start measuring performance in your app, pass a function