Merge pull request #39 from Uni-of-Exeter/add-averages-loading-tracker

fix: include climate averages in graph data loading state

Author: tomw66

client/src/App.jsx

@@ -46,6 +46,7 @@ const App = () => {
     const [year] = useState(defaultState.year);
     const [variable, setVariable] = useState(defaultState.variable);
     const [isPredictionLoading, setIsPredictionLoading] = useState(defaultState.isPredictionLoading);
+    const [areAveragesLoading, setAreAveragesLoading] = useState(defaultState.areAveragesLoading);
     const [selectedHazardName, setSelectedHazardName] = useState(defaultState.selectedHazardName);
     const [applyCoastalFilter, setApplyCoastalFilter] = useState(defaultState.applyCoastalFilter);
 
@@ -83,6 +84,7 @@ const App = () => {
                 season={season}
                 variable={variable}
                 setClimateAverages={setClimateAverages}
+                setAreAveragesLoading={setAreAveragesLoading}
             />
 
              <ClimateAverageRangesLoader
@@ -123,7 +125,7 @@ const App = () => {
                         setSeason={setSeason}
                         setRcp={setRcp}
                         climatePrediction={climatePrediction}
-                        loading={isPredictionLoading}
+                        loading={isPredictionLoading || areAveragesLoading}
                         climateAverages={climateAverages}
                         climateAverageRanges={climateAverageRanges}
                         variable={variable}

client/src/components/loaders/ClimateAveragesLoader.jsx

@@ -10,9 +10,12 @@ Common Good Public License Beta 1.0 for more details. */
 
 import { useEffect } from "react";
 
-const ClimateAveragesLoader = ({ rcp, season, variable, setClimateAverages }) => {
+const ClimateAveragesLoader = ({ rcp, season, variable, setClimateAverages, setAreAveragesLoading }) => {
     useEffect(() => {
         const fetchClimateAverages = async () => {
+            // Set loading state to true before starting the fetch
+            setAreAveragesLoading(true);
+
             try {
                 const prepend = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "";
 
@@ -39,11 +42,14 @@ const ClimateAveragesLoader = ({ rcp, season, variable, setClimateAverages }) =>
                 setClimateAverages(data);
             } catch (error) {
                 console.error("Error fetching climate averages:", error);
+            } finally {
+                // Set loading state to false after fetch completes
+                setAreAveragesLoading(false);
             }
         };
 
         fetchClimateAverages();
-    }, [rcp, season, variable, setClimateAverages]);
+    }, [rcp, season, variable, setClimateAverages, setAreAveragesLoading]);
 
     return null;
 };

client/src/utils/defaultState.js

@@ -9,6 +9,7 @@ export const defaultState = {
     year: 2070,
     variable: "tas",
     isPredictionLoading: false,
+    areAveragesLoading: false,
     selectedHazardName: "Extreme Storms",
     applyCoastalFilter: false,
     mapCenter: {lat: 55.8, lng: -3.2},