Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/users/components/MetadataProviderEffect.tsx (TypeScript)

Code before:
import { type APP_LOCALES, SOURCE_LOCALE } from 'twenty-shared/translations';
import { AppPath, type ObjectPermissions } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
  type WorkspaceMember,
  useFindAllCoreViewsQuery,
  useGetCurrentUserQuery,
  useGetManyLogicFunctionsQuery,
} from '~/generated-metadata/graphql';
import { useFindAllRecordPageLayoutsQuery } from '~/generated/graphql';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { isMatchingLocation } from '~/utils/isMatchingLocation';

export const MetadataProviderEffect = () => {
  const location = useLocation();

  const [isCurrentUserLoaded, setIsCurrentUserLoaded] = useRecoilState(
    isCurrentUserLoadedState,
  );

  const [localIsCurrentUserLoaded, setLocalIsCurrentUserLoaded] =
    useState(false);
  const [localAreViewsLoaded, setLocalAreViewsLoaded] = useState(false);
  const [localAreRecordPageLayoutsLoaded, setLocalAreRecordPageLayoutsLoaded] =
    useState(false);

  const setCurrentUser = useSetRecoilState(currentUserState);
  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
  const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
  const setAvailableWorkspaces = useSetRecoilState(availableWorkspacesState);
  const setLogicFunctions = useSetRecoilState(logicFunctionsState);
  const { initializeFormatPreferences } = useInitializeFormatPreferences();
  const isLoggedIn = useIsLogged();

  const updateLocaleCatalog = useRecoilCallback(
    ({ snapshot, set }) =>
      async (newLocale: keyof typeof APP_LOCALES) => {
        const localeValue = snapshot.getLoadable(dateLocaleState).getValue();
        if (localeValue.locale !== newLocale) {
          getDateFnsLocale(newLocale).then((localeCatalog) => {
            set(dateLocaleState, {
              locale: newLocale,
              localeCatalog: localeCatalog || enUS,
            });
          });
        }
      },
    [],
  );

Review comment (performance):
I wouldn't add this to MetadataProvider and wouldn't make it blocking. 
Page layouts will load in the background and populate the cache when ready. Pages that need them will simply return undefined from useBasePageLayout until the data arrives.
What do you think? @Devessier 

Code after:
import { type APP_LOCALES, SOURCE_LOCALE } from 'twenty-shared/translations';
import { AppPath, type ObjectPermissions } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
  type WorkspaceMember,
  useFindAllCoreViewsQuery,
  useGetCurrentUserQuery,
  useGetManyLogicFunctionsQuery,
} from '~/generated-metadata/graphql';
import { useFindAllRecordPageLayoutsQuery } from '~/generated/graphql';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { isMatchingLocation } from '~/utils/isMatchingLocation';

export const MetadataProviderEffect = () => {
  const location = useLocation();

  const [isCurrentUserLoaded, setIsCurrentUserLoaded] = useRecoilState(
    isCurrentUserLoadedState,
  );

  const [localIsCurrentUserLoaded, setLocalIsCurrentUserLoaded] =
    useState(false);
  const [localAreViewsLoaded, setLocalAreViewsLoaded] = useState(false);

  const setCurrentUser = useSetRecoilState(currentUserState);
  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
  const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
  const setAvailableWorkspaces = useSetRecoilState(availableWorkspacesState);
  const setLogicFunctions = useSetRecoilState(logicFunctionsState);
  const { initializeFormatPreferences } = useInitializeFormatPreferences();
  const isLoggedIn = useIsLogged();

  const updateLocaleCatalog = useRecoilCallback(
    ({ snapshot, set }) =>
      async (newLocale: keyof typeof APP_LOCALES) => {
        const localeValue = snapshot.getLoadable(dateLocaleState).getValue();
        if (localeValue.locale !== newLocale) {
          getDateFnsLocale(newLocale).then((localeCatalog) => {
            set(dateLocaleState, {
              locale: newLocale,
              localeCatalog: localeCatalog || enUS,
            });
          });
        }
      },
    [],
  );

  const setCoreViews = useRecoilCallback(