Skip to content

Improve Value stream dashboard loading state

Alex Pennells requested to merge 416008-lazy-load-data into master

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

  1. generateDoraTimePeriodComparisonTable() - builds the table rows with the already loaded table data
  2. generateSparklineCharts() - build the chart data to be injected into the table rows
  3. mergeSparklineCharts() - merges the chart data into the table rows

New flow

  1. generateSkeletonTableData() - builds the table rows without any data. (Table renders loading skeleton when there is no data)
  2. generateMetricComparisons() - build the table data to be injected into the table rows
  3. generateSparklineCharts() - build the chart data to be injected into the table rows
  4. mergeTableData() - merge both the table and chart data into the skeleton rows

Screenshots or screen recordings

Before After
OldLoading NewLoading
Screenshot_2023-07-21_at_10.47.09_AM Screenshot_2023-07-21_at_10.46.52_AM

How to set up and validate locally

  1. Feature.enable(:combined_analytics_dashboards)
  2. Feature.enable(:vsd_graphql_dora_and_flow_metrics)
  3. Visit the VSD: http://gdk.test:3000/groups/${YOUR_GROUP}/-/analytics/dashboards
  4. 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.

Related to #416008 (closed)

Merge request reports

Loading