Loader is not loaded : CreateBrowserRouter - React

[Shackey666]

Hello Community,

I have an issue with my actual router:

export const ROUTES = {
  HOME: '/',
  SETTINGS: 'settings',
  SIGN_IN: 'sign-in',
  SIGN_IN_MFA: 'mfa',
  CONTACT_PAGE: 'contact-page/:id',
  APPLICATION: 'application',
  ABOUT: 'about',
};

export const router = createBrowserRouter([
  {
    element: <AppLayout />,
    loader: appLayoutLoader,
    children: [
      {
        index: true,
        path: ROUTES.HOME,
        element: <RedirectionWrapper />,
      },
      {
        element: <ProtectedRoutes />,
        children: [
          {
            element: <ALayout/>,
            children: [
              {
                index: true,
                loader: testLayoutLoader,
              },
              {
                path: ROUTES.CONTACT,
                loader: contactLayoutLoader,
                element: <Contact/>,
              },
            ],
          },
          {
            element: <SettingsLayout />,
            path: ROUTES.SETTINGS,
            children: [
              {
                index: true,
                loader: settingsLayoutLoader,
              },
              {
                path: ROUTES.APPLICATION,
                element: <ApplicationSettings />,
              },
              {
                path: ROUTES.ABOUT,
                element: <AboutSettings />,
              },
            ],
          },
        ],
      },
      {
        path: ROUTES.SIGN_IN,
        element: <SignInLayout />,
        loader: signInLayoutLoader,
        children: [
          {
            index: true,
            element: <SignIn />,
          },
          {
            path: ROUTES.SIGN_IN_MFA,
            element: <SignInMfa />,
          },
        ],
      },
    ]
  },
]);

My RedirectionWrapper on Home allows me to redirect the user depending if it logged in or not to either to the 'SIGN_IN' or 'CONTACT_DEFAULT_PAGE'.

export const RedirectionWrapper = () => {
  const location = useLocation();
  const application = useStore((state) => state.application);
  const library = useStore((state) => state.library);
  const DEFAULT_CONTACT_ROUTE = `contact-page/${library.currentContact}`;

  if (!application.actions.isLoggedIn()) {
    return <Navigate to={ROUTES.SIGN_IN} replace state={{ from: location }} />;
  }

  return <Navigate to={DEFAULT_CONTACT_ROUTE} replace state={{ from: location }} />;
};

For some reasons my loader contactLayoutLoaders is not run at all (I have api call in their, and nothing is run or display). However, my component is renderered empty...

I have also a Protected Route Layout (allwoing to either show Outlet or redirect to sign-in if not logged-in)

Am I doing something wrong?

Thank you for your precious help!