F: Improve global loader visuals

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -1,7 +1,6 @@
 import { Suspense } from 'react';
-import { Outlet, useNavigation } from 'react-router';
+import { Outlet } from 'react-router';
 
-import { Loader } from '@/components/Loader';
 import { ModalLoader } from '@/components/Modal';
 import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
 import { globals } from '@/utils/constants';
@@ -15,8 +14,6 @@ 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);
@@ -50,10 +47,8 @@ function ApplicationLayout() {
           }}
         >
           <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
-            {navigation.state === 'loading' ? <GlobalLoader /> : null}
+            <GlobalLoader />
-            <Suspense fallback={<Loader />}>
+            <Outlet />
-              <Outlet />
-            </Suspense>
           </main>
           {!noNavigation && !noFooter ? <Footer /> : null}
         </div>

rsconcept/frontend/src/app/GlobalLoader.tsx

@@ -1,8 +1,20 @@
+import { useNavigation } from 'react-router';
 import clsx from 'clsx';
+import { useDebounce } from 'use-debounce';
 
 import { Loader } from '@/components/Loader';
+import { PARAMETER } from '@/utils/constants';
 
 export function GlobalLoader() {
+  const navigation = useNavigation();
+
+  const isLoading = navigation.state === 'loading';
+  const [loadingDebounced] = useDebounce(isLoading, PARAMETER.navigationPopupDelay);
+
+  if (!loadingDebounced || !isLoading) {
+    return null;
+  }
+
   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')} />

rsconcept/frontend/src/app/Router.tsx

@@ -23,7 +23,7 @@ export const Router = createBrowserRouter([
     element: <ApplicationLayout />,
     errorElement: <ErrorFallback />,
     loader: prefetchAuth,
-    hydrateFallbackElement: <Loader />,
+    hydrateFallbackElement: fallbackLoader(),
     children: [
       {
         path: '',
@@ -99,3 +99,11 @@ function parseRSFormURL(id: string | undefined, url: string) {
 function parseOssURL(id: string | undefined) {
   return { itemID: id ? Number(id) : undefined };
 }
+
+function fallbackLoader() {
+  return (
+    <div className='flex justify-center items-center h-[100dvh]'>
+      <Loader scale={6} />
+    </div>
+  );
+}

rsconcept/frontend/src/utils/constants.ts

@@ -12,6 +12,7 @@ export const PARAMETER = {
   minimalTimeout: 10, // milliseconds delay for fast updates
   zoomDuration: 500, // milliseconds animation duration
   navigationDuration: 300, // milliseconds navigation duration
+  navigationPopupDelay: 200, // milliseconds delay for navigation popup
 
   ossImageWidth: 1280, // pixels - size of OSS image
   ossImageHeight: 960, // pixels - size of OSS image