Create component specific loading & error states #278
Labels
tech-debt
Issues that reduce the technical debt of the project
typescript
Pull requests that update Typescript code
Comments
jcscottiii
changed the title
|
TODO: List out the components that need the loading state |
jcscottiii
changed the title
|
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:
|
jcscottiii
added
tech-debt
jcscottiii
added a commit
that referenced
this issue
Feb 18, 2025
…eatureWPTProgressChartPanel` using `WebstatusLineChartPanel`
This PR introduces two new custom elements, `WebstatusFeatureUsageChartPanel` and `WebstatusFeatureWPTProgressChartPanel`, for displaying feature usage and WPT progress charts, respectively. These components leverage the enhanced `WebstatusLineChartPanel` abstract class, promoting code reuse and consistency across different chart panels.
**Key changes:**
* **`WebstatusFeatureUsageChartPanel`:** This panel displays the usage statistics of a feature over time. It fetches data using the `getChromiumDailyUsageStats` API call and visualizes it using a line chart.
* **`WebstatusFeatureWPTProgressChartPanel`:** This panel displays the WPT (Web Platform Tests) progress of a feature across different browsers. It fetches data using the `getFeatureStatsByBrowserAndChannel` API call and visualizes it using a line chart with an additional "Total" series calculated using the `calculateMax` method.
* **Simplified `FeaturePage`:** By introducing these new components, the `FeaturePage` is significantly simplified. It no longer needs to handle the loading and displaying of individual charts, as these tasks are now delegated to the respective chart panel components.
* **Leveraging `data-fetch-complete` event:** The `FeaturePage` now listens for the `data-fetch-complete` event dispatched by the `WebstatusFeatureWPTProgressChartPanel` to calculate and display the percentage difference in WPT results, similar to the previous implementation.
* **Behavior changes:**
* **Loading state:** Instead of a separate full page loading overlay, the components now use the built-in loading state of the `WebstatusLineChartPanel` abstract class. This aligns with the goal of issue #278 to move towards component-level loading states.
* **Chart display:** The charts are now displayed only after all data is fetched, ensuring consistency with the stats page charts and simplifying the rendering logic.
This PR improves code organization and reusability by introducing dedicated chart panel components and leveraging the `WebstatusLineChartPanel` abstract class. It also simplifies the `FeaturePage` and provides a more consistent and streamlined user experience for viewing feature usage and WPT progress.
jcscottiii
added a commit
that referenced
this issue
Feb 19, 2025
…eatureWPTProgressChartPanel` using `WebstatusLineChartPanel`
This PR introduces two new custom elements, `WebstatusFeatureUsageChartPanel` and `WebstatusFeatureWPTProgressChartPanel`, for displaying feature usage and WPT progress charts, respectively. These components leverage the enhanced `WebstatusLineChartPanel` abstract class, promoting code reuse and consistency across different chart panels.
**Key changes:**
* **`WebstatusFeatureUsageChartPanel`:** This panel displays the usage statistics of a feature over time. It fetches data using the `getChromiumDailyUsageStats` API call and visualizes it using a line chart.
* **`WebstatusFeatureWPTProgressChartPanel`:** This panel displays the WPT (Web Platform Tests) progress of a feature across different browsers. It fetches data using the `getFeatureStatsByBrowserAndChannel` API call and visualizes it using a line chart with an additional "Total" series calculated using the `calculateMax` method.
* **Simplified `FeaturePage`:** By introducing these new components, the `FeaturePage` is significantly simplified. It no longer needs to handle the loading and displaying of individual charts, as these tasks are now delegated to the respective chart panel components.
* **Leveraging `data-fetch-complete` event:** The `FeaturePage` now listens for the `data-fetch-complete` event dispatched by the `WebstatusFeatureWPTProgressChartPanel` to calculate and display the percentage difference in WPT results, similar to the previous implementation.
* **Behavior changes:**
* **Loading state:** Instead of a separate full page loading overlay, the components now use the built-in loading state of the `WebstatusLineChartPanel` abstract class. This aligns with the goal of issue #278 to move towards component-level loading states.
* **Chart display:** The charts are now displayed only after all data is fetched, ensuring consistency with the stats page charts and simplifying the rendering logic.
This PR improves code organization and reusability by introducing dedicated chart panel components and leveraging the `WebstatusLineChartPanel` abstract class. It also simplifies the `FeaturePage` and provides a more consistent and streamlined user experience for viewing feature usage and WPT progress.
github-merge-queue bot
pushed a commit
that referenced
this issue
Feb 19, 2025
…eatureWPTProgressChartPanel` using `WebstatusLineChartPanel` (#1176) * Refactor: Introduce `WebstatusFeatureUsageChartPanel` and `WebstatusFeatureWPTProgressChartPanel` using `WebstatusLineChartPanel` This PR introduces two new custom elements, `WebstatusFeatureUsageChartPanel` and `WebstatusFeatureWPTProgressChartPanel`, for displaying feature usage and WPT progress charts, respectively. These components leverage the enhanced `WebstatusLineChartPanel` abstract class, promoting code reuse and consistency across different chart panels. **Key changes:** * **`WebstatusFeatureUsageChartPanel`:** This panel displays the usage statistics of a feature over time. It fetches data using the `getChromiumDailyUsageStats` API call and visualizes it using a line chart. * **`WebstatusFeatureWPTProgressChartPanel`:** This panel displays the WPT (Web Platform Tests) progress of a feature across different browsers. It fetches data using the `getFeatureStatsByBrowserAndChannel` API call and visualizes it using a line chart with an additional "Total" series calculated using the `calculateMax` method. * **Simplified `FeaturePage`:** By introducing these new components, the `FeaturePage` is significantly simplified. It no longer needs to handle the loading and displaying of individual charts, as these tasks are now delegated to the respective chart panel components. * **Leveraging `data-fetch-complete` event:** The `FeaturePage` now listens for the `data-fetch-complete` event dispatched by the `WebstatusFeatureWPTProgressChartPanel` to calculate and display the percentage difference in WPT results, similar to the previous implementation. * **Behavior changes:** * **Loading state:** Instead of a separate full page loading overlay, the components now use the built-in loading state of the `WebstatusLineChartPanel` abstract class. This aligns with the goal of issue #278 to move towards component-level loading states. * **Chart display:** The charts are now displayed only after all data is fetched, ensuring consistency with the stats page charts and simplifying the rendering logic. This PR improves code organization and reusability by introducing dedicated chart panel components and leveraging the `WebstatusLineChartPanel` abstract class. It also simplifies the `FeaturePage` and provides a more consistent and streamlined user experience for viewing feature usage and WPT progress. * port timestamp extractor
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: