Skip to content

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

Merged
jonsuguiyama merged 2 commits into
hasadna:mainfrom
jonsuguiyama:fix/velocity-heatmap-loading-indicator-v2
Aug 18, 2026
Merged

fix: show loading/error state on the velocity heatmap page#1815
jonsuguiyama merged 2 commits into
hasadna:mainfrom
jonsuguiyama:fix/velocity-heatmap-loading-indicator-v2

Conversation

@jonsuguiyama

Copy link
Copy Markdown
Collaborator

🤖 This PR was written with the help of an AI coding agent (Claude), reviewed and submitted by @jonsuguiyama.

Closes #1483.

Root cause

useVelocityAggregationData already returns loading/error from react-query,
and VelocityHeatmapRectangles rendered a <div className="err"> for it, but
that div is a child of react-leaflet's MapContainer, which only knows how to
position actual map layers (Rectangle, Popup, TileLayer, etc.). A plain
div there never gets a usable position, so it stays invisible in practice even
though the code appears to handle loading/error.

Fix

  • VelocityHeatmapRectangles now reports status via a setStatus?(loading, hasError)
    callback prop, mirroring the existing setMinMax pattern already used for the legend.
  • VelocityHeatmapPage owns the loading/error state and renders it as a normal
    MUI Box/CircularProgress overlay positioned above MapShell, outside the
    Leaflet children tree.
  • Background and text colors are theme-aware (theme.palette.mode), matched to
    the exact light/dark values the map legend already uses ($legend-bg/
    $legend-bg-dark in map.scss), so the text has real contrast in both themes
    instead of defaulting to the app's text color against a fixed light background.
  • Removed the now-unused .err style and its now-empty .scss file.

Note

While testing locally, the production siri_velocity_aggregation API endpoint
hung (timed out) for every date/bounds combination tried, while the rest of the
API responded normally. That looks like a separate backend issue, out of scope
for this fix.

Test plan

  • npm run lint (tsc + eslint + stylelint + prettier), clean
  • npx tsc && npx vite build, builds successfully
  • npx vitest run src/pages/velocityHeatmap, 7/7 existing tests pass

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

@NoamGaash
NoamGaash requested a review from arielvino August 10, 2026 11:27
@NoamGaash

Copy link
Copy Markdown
Member

Nice!
image

@NoamGaash NoamGaash left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's a very nice change
welcome!

@jonsuguiyama
jonsuguiyama merged commit 54a3ecc into hasadna:main Aug 18, 2026
15 checks passed
@jonsuguiyama
jonsuguiyama deleted the fix/velocity-heatmap-loading-indicator-v2 branch August 18, 2026 14:20
@NoamGaash

Copy link
Copy Markdown
Member

@all-contributors please add @jonsuguiyama as code contributor :)

@allcontributors

Copy link
Copy Markdown
Contributor

@NoamGaash

I've put up a pull request to add @jonsuguiyama! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix loading indication in the velocity map page

2 participants