Handling of error and loading states

app/components/hint.tsx

@@ -98,32 +98,6 @@ export const LoadingOverlay = () => (
   </Box>
 );
 
-export const DataSetHint = () => (
-  <Flex
-    sx={{
-      width: "100%",
-      height: "100%",
-      color: "hint",
-      margin: "auto",
-      textAlign: "center",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      flexGrow: 1,
-    }}
-  >
-    <Icon name="dataset" size={64} />
-    <Text as="h5" variant="heading2" sx={{ my: 3 }}>
-      <Trans id="hint.select.dataset">Select a dataset</Trans>
-    </Text>
-    <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
-      <Trans id="hint.select.dataset.to.preview">
-        Click on a dataset in the left column to preview its structure and
-        content.
-      </Trans>
-    </Text>
-  </Flex>
-);
 export const NoDataHint = () => (
   <Flex
     sx={{
@@ -151,7 +125,7 @@ export const NoDataHint = () => (
     </Text>
   </Flex>
 );
-export const LoadingDataError = () => (
+export const LoadingDataError = ({ message }: { message?: string }) => (
   <Flex
     sx={{
       width: "100%",
@@ -169,11 +143,18 @@ export const LoadingDataError = () => (
     <Text as="h5" variant="heading2" sx={{ my: 3 }}>
       <Trans id="hint.dataloadingerror.title">Data loading error</Trans>
     </Text>
-    <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
-      <Trans id="hint.dataloadingerror.message">
-        The data could not be loaded.
-      </Trans>
-    </Text>
+    <Box sx={{ "& > * + *:not([data-no-margin])": { marginTop: 2 } }}>
+      <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
+        <Trans id="hint.dataloadingerror.message">
+          The data could not be loaded.
+        </Trans>
+      </Text>
+      {message ? (
+        <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
+          {message}
+        </Text>
+      ) : null}
+    </Box>
   </Flex>
 );
 

app/configurator/components/dataset-metadata.tsx

@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 import NextLink from "next/link";
 import React, { ReactNode } from "react";
 import { Box, BoxProps, Link } from "theme-ui";
-import { Loading } from "../../components/hint";
 import Stack from "../../components/Stack";
 import { useFormatDate } from "../../configurator/components/ui-helpers";
 import {
@@ -19,12 +18,14 @@ export const DataSetMetadata = ({
 }: { dataSetIri: string } & BoxProps) => {
   const locale = useLocale();
   const formatDate = useFormatDate();
-  const [{ data }] = useDataCubeMetadataQuery({
+  const [{ data, fetching, error }] = useDataCubeMetadataQuery({
     variables: { iri: dataSetIri, locale },
   });
   const cube = data?.dataCubeByIri;
-  if (!cube) {
-    return <Loading />;
+  if (fetching || error || !cube) {
+    // The error and loading are managed by the component
+    // displayed in the middle panel
+    return null;
   }
 
   return (

app/configurator/components/dataset-preview.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Box, Text, Flex } from "theme-ui";
-import { HintRed, Loading } from "../../components/hint";
+import { HintRed, Loading, LoadingDataError } from "../../components/hint";
 import { DataSetPreviewTable } from "./datatable";
 import { Trans } from "@lingui/macro";
 import { useDataCubePreviewQuery } from "../../graphql/query-hooks";
@@ -15,7 +15,7 @@ export interface Preview {
 }
 export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
   const locale = useLocale();
-  const [{ data: metaData }] = useDataCubePreviewQuery({
+  const [{ data: metaData, fetching, error }] = useDataCubePreviewQuery({
     variables: { iri: dataSetIri, locale },
   });
 
@@ -108,7 +108,7 @@ export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
         </Box>
       </Flex>
     );
-  } else {
+  } else if (fetching) {
     return (
       <Flex
         sx={{
@@ -121,5 +121,18 @@ export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
         <Loading />
       </Flex>
     );
+  } else {
+    return (
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "space-between",
+          flexGrow: 1,
+          p: 5,
+        }}
+      >
+        <LoadingDataError message={error?.message} />
+      </Flex>
+    );
   }
 };

app/configurator/components/select-dataset-step.tsx

@@ -4,7 +4,6 @@ import { Router, useRouter } from "next/router";
 import React, { useMemo } from "react";
 import { Box, Button, Text } from "theme-ui";
 import { useDebounce } from "use-debounce";
-import { DataSetHint } from "../../components/hint";
 import { useDataCubesQuery } from "../../graphql/query-hooks";
 import { useConfiguratorState, useLocale } from "../../src";
 import {
@@ -157,15 +156,11 @@ export const SelectDatasetStepContent = () => {
               <SearchDatasetBox browseState={browseState} searchResult={data} />
             </Box>
           )}
-          {dataset || !data ? (
+          {dataset ? (
             <>
-              {dataset ? (
-                <Box>
-                  <DataSetPreview dataSetIri={dataset} />
-                </Box>
-              ) : (
-                <DataSetHint />
-              )}
+              <Box>
+                <DataSetPreview dataSetIri={dataset} />
+              </Box>
             </>
           ) : (
             <DatasetResults fetching={fetching} data={data} />