Create component specific loading & error states
A light gray overlay is displayed when the frontend is fetching data for a chart. This overlay doesn't prevent clicking on any of the content or any other user interaction, which is confusing since it seems like the intent of the overlay would be to disable everything.
I got a long delay after changing the starting date for a feature to 2022, and it seemed like something must be broken. I could see the spinning icon, though it was not very noticeable. but the fact that the UI was otherwise active suggested to me that something wasn't working properly and maybe the delay would be forever. The data did eventually load, and the gray overlay was removed.
TODO: List out the components that need the loading state
TODO: Go back through the playwright tests that wait X seconds and instead wait for these loading states to be finished
For this iteration, focus only on:
- Overview page
- Page loading of the overview table. It should use the existing skeleton view in between pages
- Feature detail page
- Don't fetch unless the date year >= 2020
- Rendering of the overlay should be specific to the overlay