Merge branch 'fix/imporve-map-filters' into dev

Author: evulins

src/app/component.js

@@ -104,10 +104,11 @@ const App = (props) => {
     const isResultsPage = pathname === '/observed-outcomes';
 
     // Home page needs predictions and sparse data for the map
-    // First fetch available years to ensure predictionYear is valid (e.g., 2024 not 2025)
-    // The reducer will auto-correct predictionYear, which triggers the other useEffect to fetch predictions
+    // Fetch years, predictions, and available states immediately
     if (isHomePage) {
       getAvailableYears();
+      getPredictions(predictionYear);
+      getAvailableStates({ predictionYear });
     }
 
     // Blog pages need blog posts
@@ -124,6 +125,7 @@ const App = (props) => {
     getAggregateStateData,
     getAggregateYearData,
     getAllBlogPosts,
+    getAvailableStates,
     getAvailableYears,
     getPredictions,
     getSparseData,

src/components/loader/index.js

@@ -1,11 +1,9 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import Modal from 'react-modal';
 
 import './style.scss';
 
 const Loader = ({ visible, message = 'Loading...', inline = false }) => {
-  const modalIdRef = useRef(`loader-modal-${Math.random().toString(36).substring(2, 11)}`);
-
   const spinnerContent = (
     <div className={inline ? 'loading-container loading-container--inline' : 'loading-container'}>
       <div className="loading-spinner">
@@ -23,7 +21,7 @@ const Loader = ({ visible, message = 'Loading...', inline = false }) => {
 
   return (
     <Modal
-      key={modalIdRef.current}
+      key={visible ? 'loader-open' : 'loader-closed'}
       ariaHideApp={false}
       className="loading-modal"
       closeTimeoutMS={200}