consolidate react context providers into a single component called Ap…

…pProvider

client/app/App.tsx

@@ -1,37 +1,15 @@
-import { ReactElement, Suspense } from 'react';
-import { Container } from 'react-bootstrap';
+import { ReactElement } from 'react';
 import { RouterProvider } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { ErrorBoundary } from '~/components/Error';
-import { Notifications } from '~/components/Notifications/Notifications';
+import { AppProvider } from '~/providers';
 import { router } from '~/routes';
-import { Spinner } from './components/ui';
 import './globals.css';
 
-const GlobalSpinner = () => (
-  <Container fluid className="d-flex justify-content-center align-items-center vh-100">
-    <Spinner size="sm" className="my-auto" />
-  </Container>
-);
-
 function App(): ReactElement {
   return (
-    <ErrorBoundary>
-      <ToastContainer
-        position="bottom-right"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        pauseOnHover
-        limit={3}
-      />
-      <Notifications />
-      <Suspense fallback={<GlobalSpinner />}>
-        <RouterProvider router={router} />
-      </Suspense>
-    </ErrorBoundary>
+    <AppProvider>
+      <RouterProvider router={router} />
+    </AppProvider>
   );
 }
 

client/app/features/layout/Root.tsx

@@ -1,6 +1,8 @@
-import React, { createContext, Dispatch, SetStateAction, Suspense, useState } from 'react';
+import React, { createContext, Dispatch, SetStateAction, useState } from 'react';
 import { LoaderFunction, Outlet } from 'react-router-dom';
-import { Spinner } from '~/components/ui';
+import { ToastContainer } from 'react-toastify';
+import { ErrorBoundary } from '~/components/Error';
+import { Notifications } from '~/components/Notifications/Notifications';
 import { rootStore as store } from '~/store';
 import { haztrakApi } from '~/store/htApi.slice';
 import { Sidebar } from './Sidebar/Sidebar';
@@ -32,9 +34,19 @@ export function Root() {
       <TopNav />
       <Sidebar />
       <main className="tw-mx-8 tw-mt-20">
-        <Suspense fallback={<Spinner size="xl" className="my-auto" />}>
+        <ToastContainer
+          position="bottom-right"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop
+          closeOnClick
+          pauseOnHover
+          limit={3}
+        />
+        <Notifications />
+        <ErrorBoundary>
           <Outlet />
-        </Suspense>
+        </ErrorBoundary>
       </main>
     </NavContext.Provider>
   );

client/app/index.tsx

@@ -1,8 +1,6 @@
+import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
-import { rootStore } from '~/store';
 import App from './App';
-import React from 'react';
 
 // Start mock service worker in development mode
 async function enableMocking() {
@@ -19,9 +17,7 @@ const root = createRoot(container);
 enableMocking().then(() => {
   root.render(
     <React.StrictMode>
-      <Provider store={rootStore}>
-        <App />
-      </Provider>
+      <App />
     </React.StrictMode>
   );
 });

client/app/providers.tsx

@@ -0,0 +1,25 @@
+import React, { Suspense } from 'react';
+import { Provider } from 'react-redux';
+import { ErrorBoundary } from '~/components/Error';
+import { Spinner } from '~/components/ui';
+import { rootStore } from '~/store';
+
+interface AppProviderProps {
+  children: React.ReactNode;
+}
+
+const GlobalSpinner = () => (
+  <div className="align-items-center tw-flex tw-h-screen tw-justify-center">
+    <Spinner size="lg" />
+  </div>
+);
+
+export const AppProvider = ({ children }: AppProviderProps) => {
+  return (
+    <Suspense fallback={<GlobalSpinner />}>
+      <Provider store={rootStore}>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </Provider>
+    </Suspense>
+  );
+};