DataViews: Avoid flickering while refreshing#74572
Merged
ntsekouras merged 19 commits intotrunkfrom Feb 26, 2026
Merged
Conversation
ntsekouras
added
[Type] Bug
github-actions
bot
added
[Package] Edit Site
|
Size Change: +1.62 kB (+0.02%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
ntsekouras
commented
Jan 13, 2026
| data={ data || EMPTY_ARRAY } | ||
| isLoading={ isLoadingData || isLoadingNotesCount } | ||
| isLoading={ | ||
| isLoadingData || isLoadingNotesCount || ! hasResolved |
Contributor
Author
There was a problem hiding this comment.
There is an underlying issue here with how selectors work and the isResolving might not be the best indicator, thus this change.
When we call the useEntityRecordsWithPermissions internally we call the core data selector, but here we call synchronously the existing selector that might have not been resolved yet. In that case the selector returns an empty array and the isResolving is still false (it's updated later in the event loop).
Should we update the isResolving in such cases when a selector hasn't been resolved? Is it possible and does it make sense?
Should the selector return null if it hasn't been resolved? Although this still wouldn't solve the issue to reliably use isResolved in the sense of isLoading as I think it's expected.
Any thoughts @jsnajdr or @youknowriad ?
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ntsekouras
changed the title
table layout when loading to prevent flickering
Contributor
|
This seems closely related to #74122. Is there a way we could tackle these issues together? |
Member
There was a problem hiding this comment.
I think we should also update data to displayData on the BulkSelectionCheckbox given that the table body also uses it. If we select all and then search for something that is a subset of the selection we can see the checkbox go off and on again during the loading.
jorgefilipecosta
approved these changes
Jan 13, 2026
Member
jorgefilipecosta
left a comment
jorgefilipecosta
left a comment
There was a problem hiding this comment.
Left some minor comments, but things worked well on the tests I did.
packages/dataviews/src/components/dataviews-layouts/table/index.tsx
Outdated
Show resolved
Hide resolved
Contributor
|
If we can't do something alongside #74122 then perhaps we should try a more conventional overlay rather than a blur. I don't think this blur effect is used anywhere else and feels a little out-of-place to me. Curious how other @WordPress/gutenberg-design folks feel about that. |
Contributor
|
I agree with Jay, not sure this is a good pattern. One thing we could do if need be, because it's an established pattern, is to use a spotlight effect. That reduces opacity to 20% for non-active items. |
Contributor
I agree with this. The most common UI I've experienced to indicate a loading state is to display a spinner or skeleton 🤔 |
ntsekouras
force-pushed
the
dataviews-table-add-overlay-when-loading-data
branch
from
5b4599c to
574b8f7
Compare
ntsekouras
changed the title
table layout when loading to prevent flickering
Contributor
Author
@jameskoster I think we can handle that separately since it will take way more time to add a new component, even if it seems a simple one. |
ntsekouras
commented
Jan 15, 2026
packages/dataviews/src/components/dataviews-layouts/table/style.scss
Outdated
Show resolved
Hide resolved
jameskoster
reviewed
Jan 15, 2026
packages/dataviews/src/components/dataviews-layouts/table/style.scss
Outdated
Show resolved
Hide resolved
ntsekouras
force-pushed
the
dataviews-table-add-overlay-when-loading-data
branch
from
5103e42 to
1e8b9e0
Compare
Contributor
|
Do we show the pulse animation on each change? Feels better if we keep the previous results and show something subtle no? |
Contributor
Author
I guess an alternative could be to show a loading bar somewhere - maybe above the table header. |
Member
Yeah, I think we discussed that at some point: display existing data (but inert/not interactive/disabled) until the new data comes in. |
Contributor
Author
|
This PR already makes the table inert, so I guess it's a design decision which approach to take and land. |
oandregal
reviewed
Feb 25, 2026
packages/dataviews/src/components/dataviews-layouts/table/index.tsx
Outdated
Show resolved
Hide resolved
oandregal
reviewed
Feb 25, 2026
| isItemClickable: ( item: Item ) => boolean; | ||
| view: View; | ||
| empty: ReactNode; | ||
| hasInitiallyLoaded?: boolean; |
Member
There was a problem hiding this comment.
Given that the empty states are common across layouts, we could remove this and add the logic in the top-level dataviews component — as opposed to asking every layout to handle the different states themselves.
Contributor
Author
There was a problem hiding this comment.
Updated here. This should also handle free composition cases that use DataViewsLayout.
Contributor
Author
There was a problem hiding this comment.
There are still some issues. I'll need to look into it a bit more.
Contributor
Author
There was a problem hiding this comment.
That was the issue I was referring to. We still have to pass hasInitiallyLoaded value to the picker set to true, because it doesn't use it anywhere, but we've updated the shared layout, footer components, etc..
This is no public API since the context or the provider are not exported.
oandregal
reviewed
Feb 25, 2026
oandregal
reviewed
Feb 25, 2026
| hasInitiallyLoaded, | ||
| }: ViewTableProps< Item > ) { | ||
| const { containerRef } = useContext( DataViewsContext ); | ||
| const isDelayedLoading = useDelayedLoading( isLoading ); |
Member
There was a problem hiding this comment.
Is this something that can also be moved to the top-level dataviews component? There's already an isLoading prop in the layouts that we could use instead of asking layouts to use this hook (custom layouts won't have access to it unless we make it public).
Contributor
Author
There was a problem hiding this comment.
We definitely need the actual isLoading value untouched because that's when we make things inert.
I don't think all custom layouts would want a delayed rendering of loading state and If custom layouts want similar behavior, they can implement their own easily.
Does that answer your question or I missed something?
Member
ntsekouras
force-pushed
the
dataviews-table-add-overlay-when-loading-data
branch
from
13f2eaf to
b81d692
Compare
oandregal
reviewed
Feb 25, 2026
|
|
||
| if ( ! hasInitiallyLoaded ) { | ||
| return null; | ||
| } |
Member
There was a problem hiding this comment.
Could we do this without involving the context (as part of dataviews/index.tsx, so no other components need to handle it, e.g., footer)?
Contributor
Author
There was a problem hiding this comment.
I tried that, but there is a tradeoff here. In order to handle properly in one place for both DefaultUI and free composition which renders children, we should add the check there, meaning there would be no UI at all until the initial load has completed. Now, even though it's spread among more components, I think it's the better alternative.
jameskoster
reviewed
Feb 25, 2026
|
|
||
| export function useDelayedLoading( | ||
| isLoading: boolean, | ||
| options: { delay: number } = { delay: 400 } |
Contributor
There was a problem hiding this comment.
I wonder if we should extract this as a theme variable, there may be other cases where we want to delay effects.
Contributor
|
I pushed a small tweak to animated the opacity effect. Otherwise this looks good :) |
jameskoster
approved these changes
Feb 25, 2026
oandregal
approved these changes
Feb 26, 2026
Member
oandregal
left a comment
oandregal
left a comment
There was a problem hiding this comment.
Other than the footer fix, this works fine. Tested by having thousands of pages and also enabling the activity layout.
Code wise, there are improvements I'd like us to make, but discussed them with Nik and none are public API changes so they can be follow-ups.
ntsekouras
added
the
Backport to WP 7.0 Beta/RC
|
There was a conflict while trying to cherry-pick the commit to the wp/7.0 branch. Please resolve the conflict manually and create a PR to the wp/7.0 branch. PRs to wp/7.0 are similar to PRs to trunk, but you should base your PR on the wp/7.0 branch instead of trunk. |
ntsekouras
added a commit
that referenced
this pull request
Feb 26, 2026
Contributor
Author
|
Manual backport at #75952 |
ntsekouras
added a commit
that referenced
this pull request
Feb 26, 2026
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: fcoveram <fcoveram@git.wordpress.org> Co-authored-by: StevenDufresne <dufresnesteven@git.wordpress.org>
ntsekouras
added
Backported to WP Core
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Feb 26, 2026
CI run: #11059. See #64595. --- I've included a log of the Gutenberg changes with the following command: git log --reverse --format="- %s" 23b566c72e9c4a36219ef5d6e62890f05551f6cb..022d8dd3d461f91b15c1f0410649d3ebb027207f | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy - Pattern Editing: Fix nested patterns/sections (WordPress/gutenberg#75772) - QuickEdit: rename status label and remove extra labels in popup (WordPress/gutenberg#75824) - Fix block editing modes not recomputing when isolated editor value changes (WordPress/gutenberg#75821) - Synced patterns: Fix block editing mode of synced pattern content when nested in an unsynced pattern (WordPress/gutenberg#75818) - Block Support: Fix custom CSS not saved when style schema is not defined (WordPress/gutenberg#75797) - Gallery: Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab. (WordPress/gutenberg#75852) - Navigation Overlay Close: Set Close as default text, rather than using a placeholder (WordPress/gutenberg#75692) - RTC: Fix entity save call / initial persistence. (WordPress/gutenberg#75841) - Real-time collaboration: Improve collaboration within the same rich text (WordPress/gutenberg#75703) - Client Side Media: Add device/browser capability detection (WordPress/gutenberg#75863) - Navigation editing: simplify edit/view buttons (WordPress/gutenberg#75819) - Add core/icon block to theme.json schema (WordPress/gutenberg#75813) - Fix error when undoing newly added pattern (WordPress/gutenberg#75850) - Page List Item: Replace RawHTML with dangerouslySetInnerHTML for label and title (WordPress/gutenberg#75890) - REST API: Make filter_wp_unique_filename() static to match core, plus avoid duplicate routes (WordPress/gutenberg#75782) - RichText: useAnchor: Fix TypeError in virtual element (WordPress/gutenberg#75900) - DataViews: Remove menu divider again. (WordPress/gutenberg#75908) - Theme: Add build plugins to inject design token fallbacks (WordPress/gutenberg#75901) - Theme: Remove global stylesheet (WordPress/gutenberg#75879) - Real-time collaboration: Remove ghost awareness state explicitly when refreshing (WordPress/gutenberg#75883) - Real-time collaboration: Expand mergeCrdtBlocks() automated testing (WordPress/gutenberg#75923) - Fix client-side media file naming (WordPress/gutenberg#75817) - Add: Connectors screen (WordPress/gutenberg#75833) - Merge document meta into state map (WordPress/gutenberg#75830) - Move WordPress meta key from sync package to core-data (WordPress/gutenberg#75846) - Bugfix: Fix casing of getPersistedCRDTDoc (WordPress/gutenberg#75922) - Add debug logging to SyncManager (WordPress/gutenberg#75924) - DataForm: fix label colors (WordPress/gutenberg#75730) - DataViews: minimize padding for primary action buttons (WordPress/gutenberg#75721) (WordPress/gutenberg#75947) - Connectors: Add `_ai_` prefix to connector setting names and fix naming inconsistencies (WordPress/gutenberg#75948) - Connectors: Unhook Core callbacks in Gutenberg coexistence (WordPress/gutenberg#75935) - Unsynced patterns: Rename 'Disconnect pattern' to 'Detach pattern' in context menu (WordPress/gutenberg#75807) - Editor: Remove View dropdown and pinned items from revisions header (WordPress/gutenberg#75951) - Fix: Template revisions infinite spinner (WordPress/gutenberg#75953) - Backport: Avoid flickering while refreshing (WordPress/gutenberg#74572) (WordPress/gutenberg#75952) - Add wp_ prefix to real time collaberation option. (WordPress/gutenberg#75837) git-svn-id: https://develop.svn.wordpress.org/trunk@61750 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Feb 26, 2026
CI run: WordPress/wordpress-develop#11059. See #64595. --- I've included a log of the Gutenberg changes with the following command: git log --reverse --format="- %s" 23b566c72e9c4a36219ef5d6e62890f05551f6cb..022d8dd3d461f91b15c1f0410649d3ebb027207f | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy - Pattern Editing: Fix nested patterns/sections (WordPress/gutenberg#75772) - QuickEdit: rename status label and remove extra labels in popup (WordPress/gutenberg#75824) - Fix block editing modes not recomputing when isolated editor value changes (WordPress/gutenberg#75821) - Synced patterns: Fix block editing mode of synced pattern content when nested in an unsynced pattern (WordPress/gutenberg#75818) - Block Support: Fix custom CSS not saved when style schema is not defined (WordPress/gutenberg#75797) - Gallery: Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab. (WordPress/gutenberg#75852) - Navigation Overlay Close: Set Close as default text, rather than using a placeholder (WordPress/gutenberg#75692) - RTC: Fix entity save call / initial persistence. (WordPress/gutenberg#75841) - Real-time collaboration: Improve collaboration within the same rich text (WordPress/gutenberg#75703) - Client Side Media: Add device/browser capability detection (WordPress/gutenberg#75863) - Navigation editing: simplify edit/view buttons (WordPress/gutenberg#75819) - Add core/icon block to theme.json schema (WordPress/gutenberg#75813) - Fix error when undoing newly added pattern (WordPress/gutenberg#75850) - Page List Item: Replace RawHTML with dangerouslySetInnerHTML for label and title (WordPress/gutenberg#75890) - REST API: Make filter_wp_unique_filename() static to match core, plus avoid duplicate routes (WordPress/gutenberg#75782) - RichText: useAnchor: Fix TypeError in virtual element (WordPress/gutenberg#75900) - DataViews: Remove menu divider again. (WordPress/gutenberg#75908) - Theme: Add build plugins to inject design token fallbacks (WordPress/gutenberg#75901) - Theme: Remove global stylesheet (WordPress/gutenberg#75879) - Real-time collaboration: Remove ghost awareness state explicitly when refreshing (WordPress/gutenberg#75883) - Real-time collaboration: Expand mergeCrdtBlocks() automated testing (WordPress/gutenberg#75923) - Fix client-side media file naming (WordPress/gutenberg#75817) - Add: Connectors screen (WordPress/gutenberg#75833) - Merge document meta into state map (WordPress/gutenberg#75830) - Move WordPress meta key from sync package to core-data (WordPress/gutenberg#75846) - Bugfix: Fix casing of getPersistedCRDTDoc (WordPress/gutenberg#75922) - Add debug logging to SyncManager (WordPress/gutenberg#75924) - DataForm: fix label colors (WordPress/gutenberg#75730) - DataViews: minimize padding for primary action buttons (WordPress/gutenberg#75721) (WordPress/gutenberg#75947) - Connectors: Add `_ai_` prefix to connector setting names and fix naming inconsistencies (WordPress/gutenberg#75948) - Connectors: Unhook Core callbacks in Gutenberg coexistence (WordPress/gutenberg#75935) - Unsynced patterns: Rename 'Disconnect pattern' to 'Detach pattern' in context menu (WordPress/gutenberg#75807) - Editor: Remove View dropdown and pinned items from revisions header (WordPress/gutenberg#75951) - Fix: Template revisions infinite spinner (WordPress/gutenberg#75953) - Backport: Avoid flickering while refreshing (WordPress/gutenberg#74572) (WordPress/gutenberg#75952) - Add wp_ prefix to real time collaberation option. (WordPress/gutenberg#75837) Built from https://develop.svn.wordpress.org/trunk@61750 git-svn-id: http://core.svn.wordpress.org/trunk@61056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
9 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Resolves: #74074
Right now in
tablelayout we show the headers (th) when loading new data. When we load data the spinner shows and while it's expected, it's a bit jarring.This PR evolved through the discussions here to remove the loading UI (Spinner) from the layouts. In case of
infinite scrollingthough, the layouts still need to handle their spinners, since in that use case it makes more sense to have a spinner inside the layout.inertduring loading.empty data componentbecause it counts asprevious valid dataand we avoid the flickering ofempty data->loading->empty data.useDatahook that is going to be expanded by the infinite scroll improvements (see comment).useDatahook exposes ahasInitiallyLoadedflag that layouts use in order to not show theemptycomponent during the initial load.Testing Instructions
Screenshots or screencast
Noting that for the video I'm throttling the network to 3G to make the effect easier to see, after the first couple requests.
fade-out.mov