webstatus.dev icon indicating copy to clipboard operation
webstatus.dev copied to clipboard

Create component specific loading & error states

Open dlaliberte opened this issue 1 year ago • 3 comments

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.

image

dlaliberte avatar May 14 '24 19:05 dlaliberte

TODO: List out the components that need the loading state

jcscottiii avatar Jun 17 '24 17:06 jcscottiii

TODO: Go back through the playwright tests that wait X seconds and instead wait for these loading states to be finished

jcscottiii avatar Jul 26 '24 13:07 jcscottiii

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

jcscottiii avatar Aug 05 '24 17:08 jcscottiii