fix: Locale overwriting

CHANGELOG.md

@@ -11,6 +11,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Fixes
   - Table docs now work correctly again
+  - Changing the locale when previewing a larger cube no longer triggers multiple locale switches
 
 # [3.22.5] - 2023-09-12
 

app/browse/datatable.tsx

@@ -216,7 +216,7 @@ export const DataSetPreviewTable = ({
   title: string;
   dimensions: DimensionMetadataFragment[];
   measures: DimensionMetadataFragment[];
-  observations: Observation[];
+  observations: Observation[] | undefined;
 }) => {
   const headers = useMemo(() => {
     return getSortedColumns([...dimensions, ...measures]);

app/browser/dataset-preview.tsx

@@ -108,7 +108,13 @@ export const DataSetPreview = ({
     window.scrollTo({ top: 0 });
   }, []);
 
-  if (metadata?.dataCubeByIri) {
+  if (fetching) {
+    return (
+      <Flex className={classes.loadingWrapper}>
+        <Loading />
+      </Flex>
+    );
+  } else if (metadata?.dataCubeByIri) {
     const { dataCubeByIri } = metadata;
 
     return (
@@ -188,12 +194,6 @@ export const DataSetPreview = ({
         </Paper>
       </Flex>
     );
-  } else if (fetching) {
-    return (
-      <Flex className={classes.loadingWrapper}>
-        <Loading />
-      </Flex>
-    );
   } else {
     return (
       <Flex className={classes.loadingWrapper}>

app/components/use-redirect-to-versioned-cube.spec.tsx

@@ -87,7 +87,7 @@ describe("use redirect to versioned cube", () => {
       versionedCube: { iri: "https://versioned-cube" },
     });
     expect(router.replace).toHaveBeenCalledWith({
-      pathname: "/de/browse",
+      pathname: "/browse",
       query: {
         dataset: "https://versioned-cube",
       },
@@ -100,7 +100,7 @@ describe("use redirect to versioned cube", () => {
       versionedCube: { iri: "https://versioned-cube2" },
     });
     expect(router.replace).toHaveBeenCalledWith({
-      pathname: "/de/browse",
+      pathname: "/browse",
       query: {
         dataset: "https://versioned-cube2",
       },

app/components/use-redirect-to-versioned-cube.tsx

@@ -48,7 +48,7 @@ export const useRedirectToVersionedCube = ({
 
       if (resp) {
         router.replace({
-          pathname: `/${locale}/browse`,
+          pathname: "/browse",
           query: {
             ...router.query,
             ...(router.query.iri ? { iri: resp.iri } : { dataset: resp.iri }),

app/pages/_app.tsx

@@ -26,11 +26,10 @@ export default function App({
   pageProps: { session, ...pageProps },
 }: AppProps) {
   const { events: routerEvents, asPath, locale: routerLocale } = useRouter();
+  const locale = parseLocaleString(routerLocale ?? "");
 
   useNProgress();
 
-  const locale = parseLocaleString(routerLocale ?? "");
-
   // Immediately activate locale to avoid re-render
   if (i18n.locale !== locale) {
     i18n.activate(locale);

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<AsyncLocalizationProviderProps>
+) => {
+  const { locale, children } = props;
+  const [dateFnsLocale, setDateFnsLocale] = React.useState<object>();
+
+  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 (
-    <LocalizationProvider
-      dateAdapter={DateAdapter}
-      locale={dateFnsModule.default}
-    >
+    <LocalizationProvider dateAdapter={DateAdapter} locale={dateFnsLocale}>
       {children}
     </LocalizationProvider>
   );