Просьба не писать с советами от GPT и подобных моделей, они проблему решить не смогут.

import {Suspense} from "react";
import {Appbar} from "@/widgets/Appbar";
import {Outlet} from "react-router-dom"
import {PageLoader} from "@/pages/PageLoader";


export const NavbarLayout = () => {
console.log('NavbarLayout rendered');
return (
<div className="content-page">
<Appbar/>
<Suspense fallback={<PageLoader/>}>
<Outlet/>
</Suspense>
</div>
);
};




import {createBrowserRouter, RouterProvider} from "react-router-dom";
import {routeConfig} from "@/shared/config/routeConfig/routeConfig";
import {PageError} from "@/pages/PageError";
import React from "react";
import {NavbarLayout} from "@/app/layouts/NavbarLayout";

const routes = createBrowserRouter([
{
element: <NavbarLayout/>,
errorElement: <PageError/>,
children: [
{
path: routeConfig.main.path,
element: routeConfig.main.element
},
{
path: routeConfig.rooms.path,
element:
routeConfig.rooms.element

},
{
path: routeConfig.profile.path,
element: (
routeConfig.profile.element
)
},
{
path: routeConfig.auth.path,
element: (
routeConfig.auth.element
)
},
],
},
{
path: routeConfig.not_found.path,
element: routeConfig.not_found.element,
},
]);

const AppRouter = () => {
return <RouterProvider router={routes}/>
}

export default AppRouter;



все routePath.*.element сделаны через lazy:

import { lazy } from "react";

export const MainPageAsync = lazy(() => import('./MainPage'));


в аппбаре есть ссылки через NavLink на страницы, когда я кликаю на них, то не вижу лоадера, а просто грузится на фоне и потом резко показывается.
Что только не перепробовал.
Может кто сталкивался с таким.

tg: @noname_td

Просьба не писать с советами от GPT и подобных моделей, они проблему решить не смогут.