From d3262391d250dc494a77055aef8f2a4fa0fd91aa Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 30 Mar 2023 12:22:52 +0200 Subject: [PATCH 1/3] feat: Show loading state between SELECTING_DATASET and CONFIGURING_CHART steps --- app/components/header.tsx | 4 ++- app/configurator/components/configurator.tsx | 34 ++++++++++++++++---- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/app/components/header.tsx b/app/components/header.tsx index a27c9846f..69af0b7ed 100644 --- a/app/components/header.tsx +++ b/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( backgroundColor: theme.palette.grey[100], }, content: { - minHeight: 92, + minHeight: HEADER_HEIGHT, maxWidth: ({ isConfiguring }) => (isConfiguring ? undefined : 1400), marginLeft: "auto", marginRight: "auto", diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx index 5dc815921..dd16f2bbe 100644 --- a/app/configurator/components/configurator.tsx +++ b/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 ( { }; 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 ? ( + + ) : state === "SELECTING_DATASET" ? ( ) : ( - {state.state === "CONFIGURING_CHART" ? : null} - {state.state === "PUBLISHING" ? : null} + {state === "CONFIGURING_CHART" ? : null} + {state === "PUBLISHING" ? : null} ); }; + +const LoadingConfigureChartStep = () => { + return ( + + + + ); +}; From 3b02c3a6c392915647cc9b52a16d3b5eef8263f9 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 30 Mar 2023 12:22:56 +0200 Subject: [PATCH 2/3] feat: Add additional message to Loading component for long loading times --- app/components/hint.tsx | 37 ++++++++++++++++++++++++++++++------- app/locales/de/messages.po | 5 +++++ app/locales/en/messages.po | 5 +++++ app/locales/fr/messages.po | 5 +++++ app/locales/it/messages.po | 5 +++++ 5 files changed, 50 insertions(+), 7 deletions(-) diff --git a/app/components/hint.tsx b/app/components/hint.tsx index 01f101ef8..318944e6d 100644 --- a/app/components/hint.tsx +++ b/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("regular"); const classes = useLoadingStyles(); + + React.useEffect(() => { + const timeout = setTimeout(() => { + setVariant("long"); + }, 7500); + + return () => clearTimeout(timeout); + }, []); + return ( { }} > - - Loading data… - + + + + Loading data… + + + {variant === "long" && ( + + + May take more than 30 seconds for large datasets. + + + )} + ); }; diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 90848fed0..6a70bbf26 100644 --- a/app/locales/de/messages.po +++ b/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 "Kann bei großen Datensätzen 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." diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 0eb3d1428..62015fd3b 100644 --- a/app/locales/en/messages.po +++ b/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 "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." diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 1991411a2..09492dd69 100644 --- a/app/locales/fr/messages.po +++ b/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 "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é." diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index fbe931f9d..19c72fc03 100644 --- a/app/locales/it/messages.po +++ b/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 "Può richiedere più di 30 secondi per grandi insiemi di dati." + #: app/configurator/components/chart-type-selector.tsx msgid "hint.no.visualization.with.dataset" msgstr "Nessuna visualizzazione può essere creata con il dataset selezionato." From c11b6c438f334ecaafeed4cfd2b71d8b5ef05f37 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Fri, 31 Mar 2023 09:45:51 +0200 Subject: [PATCH 3/3] chore: Update translations --- app/components/hint.tsx | 2 +- app/locales/de/messages.po | 2 +- app/locales/en/messages.po | 2 +- app/locales/fr/messages.po | 2 +- app/locales/it/messages.po | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/hint.tsx b/app/components/hint.tsx index 318944e6d..be9dfba7f 100644 --- a/app/components/hint.tsx +++ b/app/components/hint.tsx @@ -128,7 +128,7 @@ export const Loading = ({ delayMs = 1000 }: { delayMs?: number }) => { {variant === "long" && ( - May take more than 30 seconds for large datasets. + It may take more than 30 seconds for large datasets. )} diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 6a70bbf26..a2c624077 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -898,7 +898,7 @@ msgstr "Lade Daten …" #: app/components/hint.tsx msgid "hint.loading.data.large.datasets" -msgstr "Kann bei großen Datensätzen mehr als 30 Sekunden dauern." +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" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 62015fd3b..e8f0de9b8 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -898,7 +898,7 @@ msgstr "Loading data..." #: app/components/hint.tsx msgid "hint.loading.data.large.datasets" -msgstr "May take more than 30 seconds for 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" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 09492dd69..4a46e9f18 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -898,7 +898,7 @@ msgstr "Chargement des données..." #: app/components/hint.tsx msgid "hint.loading.data.large.datasets" -msgstr "Peut prendre plus de 30 secondes pour les grands ensembles de données." +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" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 19c72fc03..fd32e7766 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -898,7 +898,7 @@ msgstr "Caricamento dei dati..." #: app/components/hint.tsx msgid "hint.loading.data.large.datasets" -msgstr "Può richiedere più di 30 secondi per grandi insiemi di dati." +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"