fix: show loading/error state on the velocity heatmap page

src/pages/velocityHeatmap/components/VelocityHeatmapRectangles.tsx

@@ -1,13 +1,11 @@
 import type { SiriVelocityAggregationPydanticModel } from '@hasadna/open-bus-api-client'
 import { useContext, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Popup, Rectangle } from 'react-leaflet'
 import dayjs, { ISRAEL_TIMEZONE } from 'src/dayjs'
 import { GlobalSearchContext } from 'src/model/globalState'
 import { useVelocityAggregationData } from '../useVelocityAggregationData'
 import { VelocityHeatmapPopup } from './VelocityHeatmapPopup'
 import { useZoomLevel } from './ZoomComponent'
-import './VelocityHeatmapRectangles.scss'
 
 type VisMode = 'avg' | 'std' | 'cv'
 
@@ -35,6 +33,7 @@ function getRedOpacityColor(value: number, minV = 0, maxV = 1): string {
 interface VelocityHeatmapRectanglesProps {
   visMode: VisMode
   setMinMax?: (min: number, max: number) => void
+  setStatus?: (loading: boolean, hasError: boolean) => void
 }
 
 const DEFAULT_BOUNDS = {
@@ -47,8 +46,8 @@ const DEFAULT_BOUNDS = {
 export const VelocityHeatmapRectangles = ({
   visMode,
   setMinMax,
+  setStatus,
 }: VelocityHeatmapRectanglesProps) => {
-  const { t } = useTranslation()
   const { search } = useContext(GlobalSearchContext)
   const zoom = useZoomLevel()
   const { data, loading, error, currZoom } = useVelocityAggregationData(
@@ -85,14 +84,15 @@ export const VelocityHeatmapRectangles = ({
     setMinMax?.(minV, maxV)
   }, [minV, maxV, setMinMax])
 
+  // Pass loading/error status to parent - a plain element rendered here would
+  // be a child of react-leaflet's MapContainer, which only knows how to
+  // position actual map layers, so it would never appear on screen.
+  useEffect(() => {
+    setStatus?.(loading, !!error)
+  }, [loading, error, setStatus])
+
   return (
     <>
-      {error || loading ? (
-        <div className="err">
-          {error ? t('loading_error') : null}
-          {loading ? t('loading') : null}
-        </div>
-      ) : null}
       {data?.map((point, idx) => {
         const bounds: [[number, number], [number, number]] = [
           [point.roundedLat - half, point.roundedLon - half],

src/pages/velocityHeatmap/index.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  CircularProgress,
   Stack,
   ToggleButton,
   ToggleButtonGroup,
@@ -40,6 +41,8 @@ const VelocityHeatmapPage: React.FC = () => {
   const [visMode, setVisMode] = useState<'avg' | 'std' | 'cv'>('avg')
   const [min, setMin] = useState(0)
   const [max, setMax] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [hasError, setHasError] = useState(false)
 
   const handleDateChange = (time: dayjs.Dayjs | null) => {
     setSearch((current) => ({
@@ -83,24 +86,56 @@ const VelocityHeatmapPage: React.FC = () => {
         </ToggleButtonGroup>
       </Box>
 
-      <MapShell
-        center={[29.65, 34.6]}
-        zoom={DEFAULT_ZOOM_LEVEL}
-        scrollWheelZoom={true}
-        style={{ height: '100%', width: '100%' }}
-        legend={<VelocityHeatmapLegend visMode={visMode} min={min} max={max} />}>
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png"
-        />
-        <VelocityHeatmapRectangles
-          visMode={visMode}
-          setMinMax={(min, max) => {
-            setMin(min)
-            setMax(max)
-          }}
-        />
-      </MapShell>
+      <Box sx={{ position: 'relative', height: '100%', width: '100%' }}>
+        {(loading || hasError) && (
+          <Box
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              zIndex: 1000,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 1,
+              pointerEvents: 'none',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(40, 40, 40, 0.92)'
+                  : 'rgba(255, 255, 255, 0.9)',
+            }}>
+            {loading && <CircularProgress />}
+            <Typography
+              variant="h6"
+              component="span"
+              sx={{ color: theme.palette.mode === 'dark' ? '#fff' : '#000' }}>
+              {hasError ? t('loading_error') : t('loading')}
+            </Typography>
+          </Box>
+        )}
+        <MapShell
+          center={[29.65, 34.6]}
+          zoom={DEFAULT_ZOOM_LEVEL}
+          scrollWheelZoom={true}
+          style={{ height: '100%', width: '100%' }}
+          legend={<VelocityHeatmapLegend visMode={visMode} min={min} max={max} />}>
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png"
+          />
+          <VelocityHeatmapRectangles
+            visMode={visMode}
+            setMinMax={(min, max) => {
+              setMin(min)
+              setMax(max)
+            }}
+            setStatus={(loading, hasError) => {
+              setLoading(loading)
+              setHasError(hasError)
+            }}
+          />
+        </MapShell>
+      </Box>
     </PageContainer>
   )
 }