refactor: Make data loading state more obvious for maps

visualize-admin · Feb 17, 2022 · a788a30 · a788a30
1 parent e50781c
commit a788a30
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
@@ -155,7 +155,18 @@ export const ChartMapVisualization = ({
     }
   }, [areaLayer, dimensions, observations, symbolDimensionIri, geoCoordinates]);
 
-  if (measures && dimensions && observations) {
+  const areaLayerPrepared =
+    areaDimensionIri !== "" ? areaLayer !== undefined : true;
+  const symbolLayerPrepared =
+    symbolDimensionIri !== "" ? symbolLayer !== undefined : true;
+
+  if (
+    measures &&
+    dimensions &&
+    observations &&
+    areaLayerPrepared &&
+    symbolLayerPrepared
+  ) {
     return (
       <ChartMapPrototype
         observations={observations}
@@ -167,7 +178,7 @@ export const ChartMapVisualization = ({
         geoShapes={geoShapes}
       />
     );
-  } else if (fetching) {
+  } else if (fetching || !areaLayerPrepared || !symbolLayerPrepared) {
     return <Loading />;
   } else if (error) {
     return <LoadingDataError />;

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
@@ -192,6 +192,8 @@ export const MapComponent = () => {
   );
 
   const baseLayerStyle = useMemo(() => getBaseLayerStyle({ locale }), [locale]);
+  const featuresLoaded =
+    features.areaLayer !== undefined || features.symbolLayer !== undefined;
 
   return (
     <Box>
@@ -208,9 +210,7 @@ export const MapComponent = () => {
         <ZoomButton iconName="add" handleClick={zoomIn} />
         <ZoomButton iconName="minus" handleClick={zoomOut} />
       </Box>
-      {(areaLayer.data.length > 0
-        ? shapes.features !== undefined
-        : features.symbolLayer?.points.length !== undefined) && (
+      {featuresLoaded && (
         <DeckGL
           viewState={viewState}
           onViewStateChange={onViewStateChange}