Merge pull request #1005 from visualize-admin/feat/immediate-loading-…

…spinner

feat: Show Loading spinner between SELECTING_DATASET and CONFIGURING_CHART steps

app/components/header.tsx

@@ -20,6 +20,8 @@ import LoginMenu from "./login-menu";
 
 const DEFAULT_HEADER_PROGRESS = 100;
 
+export const HEADER_HEIGHT = 92;
+
 export const useHeaderProgressContext = () => {
   const [value, setValue] = useState(DEFAULT_HEADER_PROGRESS);
   return useMemo(() => ({ value, setValue }), [value, setValue]);
@@ -83,7 +85,7 @@ const useHeaderStyles = makeStyles<Theme, { isConfiguring: boolean }>(
       backgroundColor: theme.palette.grey[100],
     },
     content: {
-      minHeight: 92,
+      minHeight: HEADER_HEIGHT,
       maxWidth: ({ isConfiguring }) => (isConfiguring ? undefined : 1400),
       marginLeft: "auto",
       marginRight: "auto",

app/components/hint.tsx

@@ -2,17 +2,17 @@ import { Trans } from "@lingui/macro";
 import {
   Alert,
   AlertProps,
-  useTheme,
   AlertTitle,
   Box,
   BoxProps,
-  Typography,
+  keyframes,
   Link,
   Theme,
-  keyframes,
+  Typography,
+  useTheme,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 import Flex from "@/components/flex";
 import { Icon, IconName } from "@/icons";
@@ -97,8 +97,20 @@ const useLoadingStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+type LoadingHintVariant = "regular" | "long";
+
 export const Loading = ({ delayMs = 1000 }: { delayMs?: number }) => {
+  const [variant, setVariant] = React.useState<LoadingHintVariant>("regular");
   const classes = useLoadingStyles();
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setVariant("long");
+    }, 7500);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
   return (
     <Flex
       className={classes.root}
@@ -107,9 +119,20 @@ export const Loading = ({ delayMs = 1000 }: { delayMs?: number }) => {
       }}
     >
       <Spinner />
-      <Typography component="div" variant="body1">
-        <Trans id="hint.loading.data">Loading data…</Trans>
-      </Typography>
+
+      <Box>
+        <Typography>
+          <Trans id="hint.loading.data">Loading data…</Trans>
+        </Typography>
+
+        {variant === "long" && (
+          <Typography>
+            <Trans id="hint.loading.data.large.datasets">
+              It may take more than 30 seconds for large datasets.
+            </Trans>
+          </Typography>
+        )}
+      </Box>
     </Flex>
   );
 };

app/configurator/components/configurator.tsx

@@ -6,9 +6,12 @@ import React from "react";
 
 import { ChartPanelConfigurator } from "@/components/chart-panel";
 import { ChartPreview } from "@/components/chart-preview";
+import { HEADER_HEIGHT } from "@/components/header";
+import { Loading } from "@/components/hint";
 import { useConfiguratorState } from "@/configurator";
 import { ChartAnnotationsSelector } from "@/configurator/components/chart-annotations-selector";
 import { ChartConfigurator } from "@/configurator/components/chart-configurator";
+import { ChartOptionsSelector } from "@/configurator/components/chart-options-selector";
 import {
   ConfiguratorDrawer,
   DRAWER_WIDTH,
@@ -26,8 +29,6 @@ import useEvent from "@/utils/use-event";
 import { InteractiveFiltersOptions } from "../interactive-filters/interactive-filters-config-options";
 import { isInteractiveFilterType } from "../interactive-filters/interactive-filters-configurator";
 
-import { ChartOptionsSelector } from "./chart-options-selector";
-
 const BackContainer = ({ children }: { children: React.ReactNode }) => {
   return (
     <Box
@@ -183,16 +184,37 @@ const PublishStep = () => {
 };
 
 export const Configurator = () => {
+  const { pathname } = useRouter();
   // Local state, the dataset preview doesn't need to be persistent.
   // FIXME: for a11y, "updateDataSetPreviewIri" should also move focus to "Weiter" button (?)
-  const [state] = useConfiguratorState();
+  const [{ state }] = useConfiguratorState();
+  const isLoadingConfigureChartStep =
+    state === "INITIAL" && pathname === "/create/[chartId]";
 
-  return state.state === "SELECTING_DATASET" ? (
+  return isLoadingConfigureChartStep ? (
+    <LoadingConfigureChartStep />
+  ) : state === "SELECTING_DATASET" ? (
     <SelectDatasetStep />
   ) : (
     <PanelLayout>
-      {state.state === "CONFIGURING_CHART" ? <ConfigureChartStep /> : null}
-      {state.state === "PUBLISHING" ? <PublishStep /> : null}
+      {state === "CONFIGURING_CHART" ? <ConfigureChartStep /> : null}
+      {state === "PUBLISHING" ? <PublishStep /> : null}
     </PanelLayout>
   );
 };
+
+const LoadingConfigureChartStep = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+      }}
+    >
+      <Loading delayMs={0} />
+    </Box>
+  );
+};

app/locales/de/messages.po

@@ -892,9 +892,14 @@ msgstr "Sie können diese Visualisierung teilen oder sie einbetten. Zudem könne
 
 #: app/components/form.tsx
 #: app/components/hint.tsx
+#: app/components/hint.tsx
 msgid "hint.loading.data"
 msgstr "Lade Daten …"
 
+#: app/components/hint.tsx
+msgid "hint.loading.data.large.datasets"
+msgstr "Bei grossen Datensätzen kann dies mehr als 30 Sekunden dauern."
+
 #: app/configurator/components/chart-type-selector.tsx
 msgid "hint.no.visualization.with.dataset"
 msgstr "Mit dem ausgewählten Datensatz kann keine Visualisierung erstellt werden."

app/locales/en/messages.po

@@ -892,9 +892,14 @@ msgstr "You can share this visualization by copying the URL or by embedding it o
 
 #: app/components/form.tsx
 #: app/components/hint.tsx
+#: app/components/hint.tsx
 msgid "hint.loading.data"
 msgstr "Loading data..."
 
+#: app/components/hint.tsx
+msgid "hint.loading.data.large.datasets"
+msgstr "It may take more than 30 seconds for large datasets."
+
 #: app/configurator/components/chart-type-selector.tsx
 msgid "hint.no.visualization.with.dataset"
 msgstr "No visualization can be created with the selected dataset."

app/locales/fr/messages.po

@@ -892,9 +892,14 @@ msgstr "Vous pouvez partager cette visualisation en copiant l'URL ou en l'intég
 
 #: app/components/form.tsx
 #: app/components/hint.tsx
+#: app/components/hint.tsx
 msgid "hint.loading.data"
 msgstr "Chargement des données..."
 
+#: app/components/hint.tsx
+msgid "hint.loading.data.large.datasets"
+msgstr "Cela peut prendre plus de 30 secondes pour les grands ensembles de données."
+
 #: app/configurator/components/chart-type-selector.tsx
 msgid "hint.no.visualization.with.dataset"
 msgstr "Aucune visualisation ne peut être créée avec le jeu de données sélectionné."

app/locales/it/messages.po

@@ -892,9 +892,14 @@ msgstr "È possibile condividere questa visualizzazione copiando l'URL o incorpo
 
 #: app/components/form.tsx
 #: app/components/hint.tsx
+#: app/components/hint.tsx
 msgid "hint.loading.data"
 msgstr "Caricamento dei dati..."
 
+#: app/components/hint.tsx
+msgid "hint.loading.data.large.datasets"
+msgstr "Per i dataset di grandi dimensioni possono essere necessari più di 30 secondi."
+
 #: app/configurator/components/chart-type-selector.tsx
 msgid "hint.no.visualization.with.dataset"
 msgstr "Nessuna visualizzazione può essere creata con il dataset selezionato."