Improve Value stream dashboard loading state
What does this MR do and why?
Renders a skeleton for the comparison table on page load, and fills the metric and chart data as it loads.
Now that the table renders before we have any data, I removed the no data GlAlert
(in addition to the old loading state). Now a blank table will just render instead of the alert.
I also removed a condition that prevented the chart data from loading when there was no table data. Technically there could be chart data, even when there's no table data. Removing it also reduces the complexity a bit.
To make this change, I had to rework the util functions that load the data. The most significant change is that generateDoraTimePeriodComparisonTable
was split into 2 new methods, generateSkeletonTableData
and generateMetricComparisons
.
Old flow
-
generateDoraTimePeriodComparisonTable()
- builds the table rows with the already loaded table data -
generateSparklineCharts()
- build the chart data to be injected into the table rows -
mergeSparklineCharts()
- merges the chart data into the table rows
New flow
-
generateSkeletonTableData()
- builds the table rows without any data. (Table renders loading skeleton when there is no data) -
generateMetricComparisons()
- build the table data to be injected into the table rows -
generateSparklineCharts()
- build the chart data to be injected into the table rows -
mergeTableData()
- merge both the table and chart data into the skeleton rows
Screenshots or screen recordings
Before | After |
---|---|
OldLoading | NewLoading |
How to set up and validate locally
Feature.enable(:combined_analytics_dashboards)
Feature.enable(:vsd_graphql_dora_and_flow_metrics)
- Visit the VSD:
http://gdk.test:3000/groups/${YOUR_GROUP}/-/analytics/dashboards
- Watch the page load
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #416008 (closed)