Turn layout into root route

src/app-routes.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro';
 import { Banner, Flex, FlexItem } from '@patternfly/react-core';
 import WrenchIcon from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
 import { type ElementType } from 'react';
-import { Navigate, useLocation } from 'react-router';
+import { Navigate, redirect, useLocation } from 'react-router';
 import { ErrorBoundary, ExternalLink, NotFound } from 'src/components';
 import {
   AboutProject,
@@ -56,7 +56,6 @@ import {
   UserList,
   UserProfile,
 } from 'src/containers';
-import { StandaloneLayout } from 'src/layout';
 import { Paths, formatPath } from 'src/paths';
 import { config } from 'src/ui-config';
 import { loginURL } from 'src/utilities';
@@ -380,16 +379,27 @@ const appRoutes = () =>
     ...rest,
   }));
 
+const convert = (m) => {
+  const {
+    default: Component,
+    clientLoader: loader,
+    clientAction: action,
+    ...rest
+  } = m;
+  return { ...rest, loader, action, Component };
+};
+
 export const dataRoutes = [
   {
-    element: <StandaloneLayout />,
+    id: 'root',
+    lazy: () => import('src/routes/root').then((m) => convert(m)),
     children: [
       {
         errorElement: <ErrorBoundary />,
         children: [
           {
             index: true,
-            element: <Navigate to={formatPath(Paths.core.status)} />,
+            loader: () => redirect(formatPath(Paths.core.status)),
           },
           ...appRoutes(),
           // "No matching route" is not handled by the error boundary.

src/entrypoint.tsx

@@ -8,12 +8,10 @@ import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router';
 import { Alert, LoadingSpinner } from 'src/components';
-import { AppContextProvider } from './app-context';
 import { dataRoutes } from './app-routes';
 import './darkmode';
 import './l10n';
 import { configFallback, configPromise } from './ui-config';
-import { UserContextProvider } from './user-context';
 
 // App entrypoint
 
@@ -97,11 +95,5 @@ function LoadConfig(_props) {
     basename: config.UI_BASE_PATH,
   });
 
-  return (
-    <UserContextProvider>
-      <AppContextProvider>
-        <RouterProvider router={router} />
-      </AppContextProvider>
-    </UserContextProvider>
-  );
+  return <RouterProvider router={router} />;
 }

src/layout.tsx

@@ -16,8 +16,8 @@ import {
 } from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import { useState } from 'react';
-import { Link, Outlet } from 'react-router';
+import { type ReactNode, useState } from 'react';
+import { Link } from 'react-router';
 import {
   DarkmodeSwitcher,
   ExternalLink,
@@ -26,7 +26,6 @@ import {
   PulpAboutModal,
   SmallLogo,
   StatefulDropdown,
-  UIVersion,
 } from 'src/components';
 import { StandaloneMenu } from './menu';
 import { Paths, formatPath } from './paths';
@@ -85,7 +84,7 @@ const UserDropdown = ({
   />
 );
 
-export const StandaloneLayout = () => {
+export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
   const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
   const { credentials, clearCredentials } = useUserContext();
 
@@ -135,7 +134,7 @@ export const StandaloneLayout = () => {
 
   return (
     <Page isManagedSidebar header={Header} sidebar={Sidebar}>
-      <Outlet />
+      {children}
       {aboutModalVisible ? (
         <PulpAboutModal
           isOpen

src/routes/root.tsx

@@ -0,0 +1,22 @@
+import { Outlet, useNavigation } from 'react-router';
+import { AppContextProvider } from 'src/app-context';
+import { LoadingSpinner, UIVersion } from 'src/components';
+import { StandaloneLayout } from 'src/layout';
+import { UserContextProvider } from 'src/user-context';
+
+export default function Root() {
+  const navigation = useNavigation();
+  const isNavigating = Boolean(navigation.location);
+
+  return (
+    <UserContextProvider>
+      <AppContextProvider>
+        <StandaloneLayout>
+          {isNavigating && <LoadingSpinner />}
+          <Outlet />
+        </StandaloneLayout>
+        <UIVersion />
+      </AppContextProvider>
+    </UserContextProvider>
+  );
+}