feat: show app loader while loading user session

src/router/ProtectedRoute.tsx

@@ -2,21 +2,21 @@ import { BASE_URL } from '../config'
 import { Route } from '../sections/Route.enum'
 import { useSession } from '../sections/session/SessionContext'
 import { Outlet } from 'react-router-dom'
+import { AppLoader } from '../sections/shared/layout/app-loader/AppLoader'
 
 export const ProtectedRoute = () => {
   const { user, isLoadingUser } = useSession()
 
   if (isLoadingUser) {
-    //TODO:ME Show app loader here
-    return null
+    return <AppLoader />
   }
 
   if (!user) {
     window.location.href = `${BASE_URL}${Route.LOG_IN}`
     return null
   }
 
-  // TODO: When we have the login page within the SPA, we can use the following code:
+  // When we have the login page inside the SPA, we can use the following code:
   // return !user ? <Navigate to="/login" replace /> : <Outlet />
 
   return <Outlet />

src/sections/shared/layout/app-loader/AppLoader.module.scss

@@ -0,0 +1,7 @@
+@import 'src/assets/variables';
+
+.app-loader {
+  display: grid;
+  place-content: center;
+  min-height: $body-available-height;
+}

src/sections/shared/layout/app-loader/AppLoader.tsx

@@ -0,0 +1,10 @@
+import { Spinner } from '@iqss/dataverse-design-system'
+import styles from './AppLoader.module.scss'
+
+export const AppLoader = () => {
+  return (
+    <section className={styles['app-loader']}>
+      <Spinner />
+    </section>
+  )
+}