Locale Loader Runs on Auth Routes

import { createFileRoute, Outlet } from "@tanstack/react-router";
import { IntlayerProvider, useLocale } from "react-intlayer";
import {
  getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions,
  useGetApiCmsMenusCmsMenuGetAllWithParent,
} from "@/api/generated/endpoints/cms-menus/cms-menus";
import { getApiCmsMenusCmsMenuGetAllWithParentIdParentIdParams } from "@/api/generated/endpoints/cms-menus/cms-menus.zod";
import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";

export const Route = createFileRoute("/{$locale}")({
  loader: async ({ context, params }) => {
    console.log(`LOADER - Locale: ${params.locale}`);
    const queryOptions = getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions();
    await context.queryClient.ensureQueryData(queryOptions);
    return null;
  },
  component: LayoutComponent,
});

function LayoutComponent() {
  useI18nHTMLAttributes();

  const { defaultLocale } = useLocale();
  const { locale } = Route.useParams();

  const { data } = useGetApiCmsMenusCmsMenuGetAllWithParent();
  const parsed =
    getApiCmsMenusCmsMenuGetAllWithParentIdParentIdParams.safeParse(data);

  return (
    <IntlayerProvider locale={locale ?? defaultLocale}>
      <nav>
        <ul>
          {parsed.success
            ? parsed.data.map((item, idx) => (
                <li key={(item as any)?.id ?? idx}>
                  {item.displayName || item.name || "Menu"}
                </li>
              ))
            : null}
        </ul>
      </nav>
      <Outlet />
    </IntlayerProvider>
  );
}