Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataViews: keep old data while new data is loading #69194

Open
oandregal opened this issue Feb 13, 2025 · 0 comments
Open

DataViews: keep old data while new data is loading #69194

oandregal opened this issue Feb 13, 2025 · 0 comments
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Feature New feature to highlight in changelogs.

Comments

@oandregal
Copy link
Member

oandregal commented Feb 13, 2025

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.

@oandregal oandregal added the [Type] Bug An existing feature does not function as intended label Feb 13, 2025
@oandregal oandregal changed the title DataViews: leverage aria-busy to minimize table layout shifts DataViews: keep old data while new data is loading Feb 13, 2025
@oandregal oandregal added [Type] Feature New feature to highlight in changelogs. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond and removed [Type] Bug An existing feature does not function as intended labels Feb 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

No branches or pull requests

1 participant