DataViews: Move Spinner and 'No results' at the top #67730
Open
Description
opened on Dec 9, 2024
Description
When the DataViews is fetching data to show, it shows a Spinner. When there are no results, it shows a 'No results' text.
Both are shown vertically centered, in the middle of the panel.
The results are, of course, shown at the top.
While displaying content in the middle of a (mostly) empty panel may look more 'elegant' and balanced at first, it's not ideal for accessibility:
- As a low vision user, I may entirely miss the Spinner. It's a very light gray shape in the middle of a big white space, which is very difficult to notice for low vision users.
- Same for the 'No results' text: it's a small text in the middle of a big white space.
- As a screen magnifier user, I would expect important information to be shown in proximity of other controls. I may be using a very high zoom level focusing on the search and filter controls at the top of the panel and entirely miss content that is shown far from the main UI controls.
I'm not sure whether there are specific design reasons to show this content in the middle of the panel other than aesthetic reasons. Anyways, I'd like to propose to move it at the top, immediately below the search and filter
Step-by-step reproduction instructions
- Go to the Site Editor > Pages
- Obseerve that, while pages are being fetched, a Spinner is shown in the middle of the white panel.
- Click a page type that doesn't return any result, e.g. make sure you don't have any 'Private' page and click Private.
- Observe that a 'No results' message is shown in the middle of the white panel.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
Activity