Merge pull request #4506 from zeel2104/ui-rewrite-loading-page-clean

feat: add React loading page

Author: marekdano

client/src/App.test.tsx

@@ -5,6 +5,17 @@ import { App } from "./App";
 import { renderWithProviders } from "./test/test-utils";
 
 describe("App", () => {
+  it("renders the loading page without authentication", async () => {
+    localStorage.clear();
+    sessionStorage.clear();
+    window.history.pushState({}, "", "/app/loading");
+
+    renderWithProviders(<App />);
+
+    expect(await screen.findByRole("status", { name: /loading/i })).toBeInTheDocument();
+    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+  });
+
   it("logs in and navigates to Gateways page via sidebar", async () => {
     const user = userEvent.setup();
 

client/src/App.tsx

@@ -4,6 +4,7 @@ import { RouterProvider, Route, Redirect, AuthGuard, useRouter } from "./router"
 import { AppShell } from "./components/layout/AppShell";
 
 import { Login } from "./pages/Login";
+import { Loading } from "./pages/Loading";
 import { ForgotPassword } from "./pages/ForgotPassword";
 import { ResetPassword } from "./pages/ResetPassword";
 import { ChangePassword } from "./pages/ChangePassword";
@@ -34,6 +35,7 @@ import { NotFound } from "./pages/NotFound";
 function PublicRoutes() {
   return (
     <>
+      <Route path="/app/loading" component={Loading} />
       <Route path="/app/login" component={Login} />
       <Route path="/app/forgot-password" component={ForgotPassword} />
       <Route path="/app/reset-password/:token" component={ResetPassword} />

client/src/pages/Loading.tsx

@@ -0,0 +1,22 @@
+import { useIntl } from "react-intl";
+import { MainNavIcon } from "../components/icons/MainNavIcon";
+
+export function Loading() {
+  const intl = useIntl();
+  const label = intl.formatMessage({ id: "common.loading" });
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="flex min-h-screen items-center justify-center px-6">
+        <div
+          role="status"
+          aria-live="polite"
+          aria-label={label}
+          className="flex size-24 items-center justify-center rounded-lg border border-border bg-card text-card-foreground shadow-sm"
+        >
+          <MainNavIcon className="h-12 w-14" />
+        </div>
+      </div>
+    </main>
+  );
+}

client/src/router/index.tsx

@@ -201,7 +201,11 @@ export function Redirect({ to }: { to: string }) {
 // ---------------------------------------------------------------------------
 
 // Exact paths that are always public.
-const DEFAULT_PUBLIC_PATHS: readonly string[] = ["/app/login", "/app/forgot-password"];
+const DEFAULT_PUBLIC_PATHS: readonly string[] = [
+  "/app/loading",
+  "/app/login",
+  "/app/forgot-password",
+];
 
 // Path prefixes whose subtrees are always public.
 const DEFAULT_PUBLIC_PREFIXES: readonly string[] = ["/app/reset-password/"];
@@ -231,6 +235,6 @@ export function AuthGuard({
     }
   }, [authenticated, isPublic, navigate]);
 
-  if (!authenticated) return null;
+  if (isPublic || !authenticated) return null;
   return <>{children}</>;
 }