F: Add global loader for navigation

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -1,5 +1,5 @@
 import { Suspense } from 'react';
-import { Outlet } from 'react-router';
+import { Outlet, useNavigation } from 'react-router';
 
 import { Loader } from '@/components/Loader';
 import { ModalLoader } from '@/components/Modal';
@@ -9,11 +9,14 @@ import { globals } from '@/utils/constants';
 import { NavigationState } from './Navigation/NavigationContext';
 import { Footer } from './Footer';
 import { GlobalDialogs } from './GlobalDialogs';
-import ConceptToaster from './GlobalToaster';
+import { GlobalLoader } from './GlobalLoader';
+import { ToasterThemed } from './GlobalToaster';
 import { GlobalTooltips } from './GlobalTooltips';
 import { Navigation } from './Navigation';
 
 function ApplicationLayout() {
+  const navigation = useNavigation();
+
   const mainHeight = useMainHeight();
   const viewportHeight = useViewportHeight();
   const showScroll = useAppLayoutStore(state => !state.noScroll);
@@ -24,7 +27,7 @@ function ApplicationLayout() {
   return (
     <NavigationState>
       <div className='min-w-[20rem] antialiased h-full max-w-[120rem] mx-auto'>
-        <ConceptToaster
+        <ToasterThemed
           className='text-[14px] cc-animate-position'
           style={{ marginTop: noNavigationAnimation ? '1.5rem' : '3.5rem' }}
           autoClose={3000}
@@ -47,6 +50,7 @@ function ApplicationLayout() {
           }}
         >
           <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
+            {navigation.state === 'loading' ? <GlobalLoader /> : null}
             <Suspense fallback={<Loader />}>
               <Outlet />
             </Suspense>

rsconcept/frontend/src/app/GlobalLoader.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+import { Loader } from '@/components/Loader';
+
+export function GlobalLoader() {
+  return (
+    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
+      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
+      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')} />
+      <div
+        className={clsx(
+          'px-10 mb-10',
+          'z-modal absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
+          'border rounded-xl bg-prim-100'
+        )}
+      >
+        <Loader scale={6} />
+      </div>
+    </div>
+  );
+}

rsconcept/frontend/src/app/GlobalToaster.tsx

@@ -4,9 +4,7 @@ import { usePreferencesStore } from '@/stores/preferences';
 
 interface ToasterThemedProps extends Omit<ToastContainerProps, 'theme'> {}
 
-function ToasterThemed(props: ToasterThemedProps) {
+export function ToasterThemed(props: ToasterThemedProps) {
   const darkMode = usePreferencesStore(state => state.darkMode);
   return <ToastContainer theme={darkMode ? 'dark' : 'light'} {...props} />;
 }
-
-export default ToasterThemed;

rsconcept/frontend/src/components/Modal/ModalLoader.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import clsx from 'clsx';
 
 import { Loader } from '@/components/Loader';