diff --git a/app/utils/l10n-provider.tsx b/app/utils/l10n-provider.tsx index 913577cbb..c3d52b343 100644 --- a/app/utils/l10n-provider.tsx +++ b/app/utils/l10n-provider.tsx @@ -1,37 +1,52 @@ import { LocalizationProvider } from "@mui/lab"; import DateAdapter from "@mui/lab/AdapterDateFns"; -import React, { useEffect, useState } from "react"; - -const AsyncLocalizationProvider = ({ - locale, - children, -}: { - locale: string; - children: React.ReactNode; -}) => { - const [dateFnsModule, setDateFnsModule] = useState<{ default: object }>(); - useEffect(() => { +import React from "react"; + +import { Locale } from "@/locales/locales"; + +type AsyncLocalizationProviderProps = { + locale: Locale; +}; + +const AsyncLocalizationProvider = ( + props: React.PropsWithChildren +) => { + const { locale, children } = props; + const [dateFnsLocale, setDateFnsLocale] = React.useState(); + + React.useEffect(() => { const run = async () => { - if (locale === "fr") { - setDateFnsModule(await import("date-fns/locale/fr")); - } else if (locale === "de") { - setDateFnsModule(await import("date-fns/locale/de")); - } else if (locale === "it") { - setDateFnsModule(await import("date-fns/locale/it")); - } else if (locale === "en") { - setDateFnsModule(await import("date-fns/locale/en-GB")); + switch (locale) { + case "en": { + const importedLocale = await import("date-fns/locale/en-GB"); + setDateFnsLocale(importedLocale.default); + break; + } + case "de": + case "fr": + case "it": { + const importedLocale = await import( + /* webpackMode: "lazy", webpackChunkName: "date-fns-[index]", webpackExclude: /_lib/ */ + `date-fns/locale/${locale}/index.js` + ); + setDateFnsLocale(importedLocale.default); + break; + } + default: + const _exhaustiveCheck: never = locale; + return _exhaustiveCheck; } }; + run(); }, [locale]); - if (!dateFnsModule) { + + if (!dateFnsLocale) { return null; } + return ( - + {children} );