From 74c2bc6795bb3904847241cf004d26e58303d2ff Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 1 Feb 2022 16:47:02 +0100
Subject: [PATCH 1/3] feat: Do not show spinner in browsing left panel while
 loading dataset

Already one spinner in the middle
---
 app/configurator/components/dataset-metadata.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/configurator/components/dataset-metadata.tsx b/app/configurator/components/dataset-metadata.tsx
index 39536280b..ca871a799 100644
--- a/app/configurator/components/dataset-metadata.tsx
+++ b/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 (

From fcbda352b8d125ba33a4e840107b8f49a0b13d1c Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 1 Feb 2022 16:47:02 +0100
Subject: [PATCH 2/3] feat: Handle dataset loading error

---
 app/components/hint.tsx                       | 19 +++++++++++++------
 .../components/dataset-preview.tsx            | 19 ++++++++++++++++---
 .../components/select-dataset-step.tsx        | 12 ++++--------
 3 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/app/components/hint.tsx b/app/components/hint.tsx
index 7004bf24a..3f7dcb5f7 100644
--- a/app/components/hint.tsx
+++ b/app/components/hint.tsx
@@ -151,7 +151,7 @@ export const NoDataHint = () => (
     </Text>
   </Flex>
 );
-export const LoadingDataError = () => (
+export const LoadingDataError = ({ message }: { message?: string }) => (
   <Flex
     sx={{
       width: "100%",
@@ -169,11 +169,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>
 );
 
diff --git a/app/configurator/components/dataset-preview.tsx b/app/configurator/components/dataset-preview.tsx
index 2c627b0ee..afa22cd85 100644
--- a/app/configurator/components/dataset-preview.tsx
+++ b/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>
+    );
   }
 };
diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
index 44e0855b8..e6ee6f622 100644
--- a/app/configurator/components/select-dataset-step.tsx
+++ b/app/configurator/components/select-dataset-step.tsx
@@ -157,15 +157,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} />

From 1c74258322dc4025368f3b6afe4cf42ed2947a23 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 1 Feb 2022 16:58:28 +0100
Subject: [PATCH 3/3] refactor: Remove unused component

---
 app/components/hint.tsx                       | 26 -------------------
 .../components/select-dataset-step.tsx        |  1 -
 2 files changed, 27 deletions(-)

diff --git a/app/components/hint.tsx b/app/components/hint.tsx
index 3f7dcb5f7..2fc17a10f 100644
--- a/app/components/hint.tsx
+++ b/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={{
diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
index e6ee6f622..16696caef 100644
--- a/app/configurator/components/select-dataset-step.tsx
+++ b/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 {