Add loading progress bar for time series fetch (#26)#50
Conversation
Introduce a reusable ProgressBar (src/components/ui/ProgressBar.tsx) and show it in the sidebar readout while a pixel time series is downloading. It runs in indeterminate mode: the pixel fetch is a single slice request with no per-chunk hook and no known total, so an honest percentage is not available without a byte-streaming store wrapper. The bar therefore shows real activity via a sweeping accent segment rather than a fabricated percent. The component already accepts a `value` prop, so a determinate mode can be wired later if we add that wrapper. Styling uses the editor/accent design tokens with a reduced-motion fallback. Closes #26 once merged.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new ProgressBar component that supports both determinate and indeterminate states, along with the necessary CSS animations and a media query for reduced motion. The progress bar is integrated into the MapReadout component to display during time series loading. The review feedback focuses on improving the accessibility, reusability, and robustness of the new ProgressBar component (such as avoiding aria-busy, extending standard HTML attributes, and handling NaN values), as well as preventing redundant screen reader announcements in MapReadout by hiding the visual progress bar using aria-hidden="true".
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
🚀 Vercel preview deployed Preview URL: https://earth-prints-4eqqthh8d-anastasiia-s-projects10.vercel.app |
Redesign the sidebar readout away from three stacked bordered cards into one continuous inspector split by hairline rules: - The clicked coordinate leads, the daily-mean chart is the hero, grid cell and array index drop to a quiet two-up row, history control sits at the foot. - Inviting empty state before a point is picked. Replace the indeterminate loader with a determinate percentage. The reader now fetches the pixel series one time-chunk at a time in parallel and reports completed-of-total as each chunk arrives, so the bar shows a real "n of N chunks · X%". Segments are stitched back in chunk order, so the values are identical to the previous single-slice fetch and the same bytes are downloaded. Falls back to the animated bar until the first count arrives. The chart skeleton becomes a decorative axis frame so the percentage is the single loading status.
Address panel feedback: - Move the history-window control above the chart, and group it with the chart so there is no divider between them. - Vertically center the empty "Click the map" state. - The percentage was stuck at 0 because the default window is a single time-chunk, so chunk-counting only ever read 0 of 1. Progress is now byte-level: a custom fetch on the zarr store streams each chunk response and reports loaded/total bytes, so the bar ramps smoothly and shows a real percent plus a MB readout. If a response has no Content-Length it falls back to the animated bar, never blocking the fetch. Verified against the live store that the percent passes through intermediate values and ends at 100%. This reverts the earlier per-time-chunk fetch back to the single-slice pixel fetch, since byte progress no longer needs it.
1 participant
Implements the loading progress bar from #26, and reworks the map's left panel per review feedback.
Progress bar (#26)
fetchon the zarr store streams each chunk response and reports loaded / total bytes, so the bar ramps smoothly and shows a percent plus a MB readout.Content-Length, and never blocks the fetch.ProgressBarcomponent (determinate or indeterminate) with aprefers-reduced-motionfallback.Left-panel rework
Verify
eslint,next build, andvitest(44 tests) all pass.Base is
ui-reworkbecause this builds on the time series feature from #47. Note: since the base is not the default branch,Closes #26will not auto-close the issue on merge, so it can be closed manually once this lands.Closes #26.