dataset data types fetch/refresh logic

src/components/datasets/DatasetOverview.js

@@ -8,13 +8,22 @@ import { useDatasetDataTypesByID } from "@/modules/datasets/hooks";
 import { datasetPropTypesShape, projectPropTypesShape } from "@/propTypes";
 
 const DatasetOverview = ({ isPrivate, project, dataset }) => {
-  const datasetDataTypes = useDatasetDataTypesByID(dataset.identifier);
-  const isFetchingDataset = datasetDataTypes?.isFetching;
+  const { dataTypesByID, isFetchingDataTypes, hasAttemptedDataTypes } = useDatasetDataTypesByID(dataset.identifier);
+
   // Count data types which actually have data in them for showing in the overview
-  const dataTypeCount = useMemo(
-    () => Object.values(datasetDataTypes?.itemsByID || {}).filter((value) => (value.count || 0) > 0).length,
-    [datasetDataTypes, dataset],
+  const dataTypesCount = useMemo(
+    () => Object.values(dataTypesByID ?? {}).filter((value) => (value.count || 0) > 0).length,
+    [dataTypesByID],
   );
+  const dataTypeDisplay = useMemo(() => {
+    if (isFetchingDataTypes) {
+      // refresh: display count based on previous state
+      if (hasAttemptedDataTypes) return dataTypesCount;
+      // first fetch: wait for data to display count
+      return EM_DASH;
+    }
+    return dataTypesCount;
+  }, [dataTypesCount, isFetchingDataTypes, hasAttemptedDataTypes]);
 
   return (
     <>
@@ -52,8 +61,8 @@ const DatasetOverview = ({ isPrivate, project, dataset }) => {
           <Statistic title="Created" value={new Date(Date.parse(dataset.created)).toLocaleString()} />
         </Col>
         <Col span={isPrivate ? 12 : 8}>
-          <Spin spinning={isFetchingDataset}>
-            <Statistic title="Data types" value={isFetchingDataset ? EM_DASH : dataTypeCount} />
+          <Spin spinning={isFetchingDataTypes}>
+            <Statistic title="Data types" value={dataTypeDisplay} />
           </Spin>
         </Col>
       </Row>

src/modules/datasets/hooks.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useProjects } from "@/modules/metadata/hooks";
 import { useAppDispatch, useAppSelector } from "@/store";
 import { fetchDatasetDataTypesSummariesIfPossible, fetchDatasetsDataTypes } from "@/modules/datasets/actions";
@@ -27,5 +27,13 @@ export const useDatasetDataTypesByID = (datasetId) => {
   useEffect(() => {
     dispatch(fetchDatasetDataTypesSummariesIfPossible(datasetId));
   }, [datasetId]);
-  return useAppSelector((state) => state.datasetDataTypes.itemsByID[datasetId]);
+
+  const dataTypes = useAppSelector((state) => state.datasetDataTypes.itemsByID[datasetId]);
+  return useMemo(() => {
+    return {
+      dataTypesByID: dataTypes?.itemsByID,
+      isFetchingDataTypes: dataTypes?.isFetching ?? true,
+      hasAttemptedDataTypes: dataTypes?.hasAttempted ?? false,
+    };
+  }, [dataTypes]);
 };

src/modules/datasets/reducers.js

@@ -26,6 +26,7 @@ export const datasetDataTypes = (
           ...state.itemsByID,
           [datasetID]: {
             itemsByID: state.itemsByID[datasetID]?.itemsByID ?? {},
+            hasAttempted: state.itemsByID[datasetID]?.hasAttempted ?? false,
             isFetching: true,
           },
         },
@@ -57,6 +58,7 @@ export const datasetDataTypes = (
           [datasetID]: {
             ...state.itemsByID[datasetID],
             isFetching: false,
+            hasAttempted: true,
           },
         },
       };