New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add progress indicator to the result section #706
add progress indicator to the result section #706
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/covid19-scenarios/covid19-scenarios/3flh3tfrr |
Codecov Report
@@ Coverage Diff @@
## master #706 +/- ##
==========================================
- Coverage 24.58% 24.53% -0.06%
==========================================
Files 134 135 +1
Lines 2896 2902 +6
Branches 386 388 +2
==========================================
Hits 712 712
- Misses 2184 2190 +6
|
@Chong-anson Thanks, it looks promising, however I insist on this important feature (from the original issue):
The whole idea of the app is to allow user to explore different parameters and to see how they affect the results (for example, when relaxing the quarantine measures, user should be able to see that the death plot goes up, etc.) Instead of conditional rendering (spinner vs plot) we could implement a semi-transparent overlay on top of the plot, such that the data and the transition from one result to another is visible at all times. Note, that rendering the whole plot from scratch is very costly (takes from 500 to 1000ms on average machine), so we want to ensure that only the changed items are re-rendered (for example, axes, grid and legend stays the same). This means that we need to avoid unmounting the plot component, changing it's size and changing its props unnecessarily. Also, currently, the size is changing when switching between the spinner and the plot. Implementing overlay should hopefully fix that. Additional bonus for ensuring that there is no size jump on first render (you know, when the results section "unrolls" down on app load). This is a creative issue, so feel free to experiment, implement your own idea of how it may look like and refactor the code structure when needed. |
Thanks for your detailed comment! I will work on that! |
Hi Ivan, I edited the components in ResultCard and added some CSS. Sorry for the delay, my internet was down. I tried to work on the "unrolling issue" in the first render, but have been stuck. As the render was handled by React-Resize-Detector, I cannot interfere with the sizing |
Code Climate has analyzed commit ac025d0 and detected 0 issues on this pull request. View more on Code Climate. |
This looks good thanks! |
Related issues and PRs
Description
Impacted Areas in the application
Testing