Index view for Templates & Parts: use grid layout as default
#60069
Conversation
|
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. |
oandregal
added
[Type] Enhancement
oandregal
requested review from
mcsf,
youknowriad,
jorgefilipecosta and
ntsekouras
|
Size Change: -4 B (0%) Total Size: 1.73 MB
ℹ️ View Unchanged
|
oandregal
changed the title
grid layout as defaultgrid layout as default
This is how Templates, Patterns, and Parts screens load with previews: Gravacao.do.ecra.2024-03-21.as.11.41.22.movAll screens could be improved, though Templates seems a bit slower than the other two. Given how they compare, I find that we could ship this PR as it is and investigate follow-ups for 1) views that use |
I think ideally we have a loading indicator for all of these preview tiles. This feels pretty broken to me: loading.mp4If we're switching to Grid layout as the default one, I think it might be good to hide the description field by default. It's a valid one to include when you really need it, but since the grid layout is primarily visual the visible description feels a bit counter-intuitive. |
|
In #60114 I tested telling the browser to lazy load those previews — TLDR: it doesn't work. |
oandregal
force-pushed
the
update/template-index-view-grid
branch
from
557d5a0 to
fc0f513
Compare
|
While we cannot do lazy-loading in the browser, we can at the application level. We actually have something for this built-in into DataViews (deferredRendering): I've noticed it wasn't working as expected, so I've pushed a change to fix that. With this prop is active, the data is loaded in batches of 3 elements, instead of loading all items at the same time: Gravacao.do.ecra.2024-03-25.as.13.01.07.movThis is the same we do in patterns, though the effect is not such noticeable there because patterns previews are faster than templates. One thing I've noticed is that we may want to create a loading indicator for this mode: the way it works, in slow browsers, an user wouldn't see if the dataset has 3 items or it hasn't finished loading them all. Ideas for this? Perhaps we should try a bluish bar below the top-level bar? |
I'm not 100% what you're asking, but I think ideally all the data except for the previews would appear at once, and then the previews would load after. Something like this: 
Is that feasible? |
The short answer is no. The longer answer is that it's not obviously feasible because we don't have a "done" event that tell us when the previews are ready. I'm still looking for options and will report back on this. In the meantime, one alternative that we do have is to batch-loading the items (current state of the PR) + have a general loading indicator. Note this |
|
Could we add a loading indicator behind the preview? Kind of like a background image. |
I've marked the background using red so we could asses the surface we'd have for this: Gravacao.do.ecra.2024-04-02.as.12.20.13.movI find the surface area a bit irregular, though it's the pieces that lay in the middle the first ones to be rendered. Perhaps that's enough of a design surface? If we pursue this, it should be a static background, so it doesn't consumer resources when the previews are loaded. |
|
I've investigated lazy loading iframes, but we cannot use them in this particular use case, see #60114 (comment). There're ongoing efforts to improve preview performance as well (#60349 and #60310): I tested them with this PR (x4 CPU slowdown) and previews improve a bit, though they are still noticeable laggy. Besides the first load, there are other experiences that need improving. For example, filtering. Note how the previews need to be re-rendered after having being filtered: Gravacao.do.ecra.2024-04-02.as.12.33.53.mov |
|
Extracted the fix to |
A small, centrally-aligned loading indicator seems worth a try?
How static are we talking, icon / animated gif, or can we stretch to animated svg / css animation? Even if the red area just had a simple pulse animation that would help. |
We can try. My point is that we'd have up to 20 of them still consuming resources when the previews are already loaded. |
|
Yeah I totally understand the concern, but I'm unsure how much resource a simple css animation consumes? It's probably worth trying the different options. Spinner, simple animation, static asset. |
oandregal
force-pushed
the
update/template-index-view-grid
branch
from
fc0f513 to
97f8d6c
Compare
|
So, in #60425 Ella created a component for us to render the block previews async. As a result, the items list is rendered all at once and then the previews render later, one by one. In between rendering any preview user interactions can take in. There's still some lag if the user interacts just when the browser is rendering a heavy preview — this is the same as in This is how it behaves now: Gravacao.do.ecra.2024-04-04.as.14.07.26.movAnd this is with a 6x slowdown: Gravacao.do.ecra.2024-04-04.as.14.08.47.mov |
oandregal
removed
[Status] In Progress
|
I have an idea to unblock user interaction, but it's a bit wild. At some point I'll give it a try. Basically render the preview content in the iframe instead of running it in the main frame and injecting it. But that requires more scripts in the iframe. |
|
This does feel much snappier. Happy to merge, test, and iterate. But I still think the UX would be smoother if the preview was obscured until fully loaded, similar to the main preview frame in the site editor. It feels a bit clunky how different elements within a single template preview load block at a time. It's particularly bad when you have lots of template parts, query loops, etc. |
oandregal
added
the
[Feature] DataViews
…ress#60069) Co-authored-by: oandregal <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: SaxonF <[email protected]>
Part of #55083
Related #59659
Follow-up to #59792
What?
Sets the
gridlayout as the default for the templates & parts index views:How?
gridas default.Testing Instructions
Navigate to "Site Editor > Templates" and verify the
gridlayout is used as default.