Feature #22360
open
Use "skeleton" style pulsers for data table contents during load
Added by Stephen Smith 4 months ago.
Updated about 6 hours ago.
Description
When the data table filter has changed, such as navigating between projects, it is confusing when it continues to show the old contents.
Improve the data table so that it uses "skeleton" pulsers as stand-in contents in this case.
Note that we want to distinguish between cases where the filter changed (so we expect different contents) and cases when we are just refreshing the contents with the same filter to bring the contents up to date -- this often happens automatically on a timer so it would be very distracting if it kept flickering between the pulsers and the contents.
- Target version changed from Development 2024-12-04 to Development 2025-01-08
- Subject changed from Use "skeleton" style pulsers for lazy loaded fields to Use "skeleton" style pulsers for lazy loaded fields and other UI elements with loading placeholders
- Target version changed from Development 2025-01-08 to Development 2025-01-29
- Target version changed from Development 2025-01-29 to Development 2025-02-12
- Target version changed from Development 2025-02-12 to Development 2025-02-26
Hi,
This would be an important improvement for us. We are frequently getting strong feedback about the the perceived slowness of the workbench and this would be a big improvement. So please prioritise this if possible.
Moritz Gilsdorf wrote in #note-7:
Hi,
This would be an important improvement for us. We are frequently getting strong feedback about the the perceived slowness of the workbench and this would be a big improvement. So please prioritise this if possible.
Hi Moritz,
We have some pretty significant workbench 2 performance improvements pending in #22127.
The idea with skeletons is that the elements of the control are rendered as either horizontal bars (for text), boxes or circles (for images). These elements may get a subtle throbbing effect to indicate something is happening.
One point that comes to mind -- when rendering skeleton components we don't know exactly how many items there will be, e.g. the data table could have 3 items or 13, or the breadcrumbs can be several levels deep. However, we want to minimize flicker.
Tentatively, I think it should work like this:
- If the component is loading for the first time, use an arbitrary small number (like 3)
- If the component has been loaded before, use the previous number of items -- this way, the items that were already there are replaced by skeleton components, then replaced by new content. The idea is we don't show the old content while loading (which is confusing) but we don't completely blank it out (which creates flicker).
I'm open to other suggestions, though.
- Target version changed from Development 2025-02-26 to Development 2025-03-19
- Target version changed from Development 2025-03-19 to Development 2025-04-02
- Target version changed from Development 2025-04-02 to Development 2025-04-16
- Target version changed from Development 2025-04-16 to Future
- Target version changed from Future to Development 2025-04-16
- Description updated (diff)
- Subject changed from Use "skeleton" style pulsers for lazy loaded fields and other UI elements with loading placeholders to Use "skeleton" style pulsers for data table contents during load
- Assigned To set to Stephen Smith
Also available in: Atom
PDF