DataViews: keep old data while new data is loading

[oandregal]

What

The DataViews component has a isLoading prop that enables consumers to build this user experience (displays spinner when data is loading):

Screen.Recording.2025-02-13.at.23.22.39.mov

In certain scenarios, consumers want to build this other experience (keep old data until new data has been loaded):

Screen.Recording.2025-02-13.at.23.19.55.mov

Discussion

There's an existing aria-busy attribute attached to the table to communicate the loading state to Assistive Technologies. However, it's not used or can't be configured to communicate the same to visual users.

The second experience can be built today doing the following:

• Leverage the aria-busy attribute to set a visual indication (e.g., lower opacity). This is hacky because the classes are not public API. It'd be best if we had an API-first way to do this:

.dataviews-wrapper table.dataviews-view-table[aria-busy='true'] {
	opacity: 0.5;
}

• Additionally, the actions need to be disabled, so they aren't clickable when the new data is still loading.

Goal

It'd be good to enable consumers to build the second experience as a first-class citizen in DataViews.

[Vrishabhsk]

Hi @oandregal

• I have raised a PR to address this request : Feat : Persist old data during loading in DataViews #69717
• I would consider this as a first iteration for the feature and might require your input on the re-work

Let me know your thoughts on this. Thanks