When editing a view, the action buttons (add attachment, add block, etc) load in a vertical configuration, and are subsequently moved via JavaScript. The vertical layout is briefly visible (depending on how quick the backend is), and creates a non-polished experience for the site-builder.
This step is to mitigate this jank as much as possible.
Edit a view (such as /admin/structure/views/view/comment) and notice the jank.
If your backend is quick enough where it's not quite noticeable, you can use your browser's dev tools to throttle the connection to "fast 3g"
Similar to what was done in #3404218: Table filter creates jank (layout shift) on page load, the plan is to use the new at-media scripting feature to reduce the jank as much as possible in browsers that support this. For older browsers, the current behavior will still persist.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | views-ui-less-jank.mp4 | 1.47 MB | mherchel |
| views-ui.mp4 | 1.6 MB | mherchel |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !7506
Comments
Comment #2
mherchelComment #8
mherchelMR should be ready to go! Here's a video (taken with throttling set to "Fast 3g") for comparison.
Comment #9
smustgrave commentedcan confirm seeing the jump mentioned by @mherchel.
CSS changes stop the jump.
Comment #10
nod_How does it recover if the js crashes or doesn't finish downloading?
Comment #11
mherchelThats a good question :)
When I intentionally break that JS, the buttons will no longer show, which is a regression.
Setting back to NW. I'm pretty confident I can find a way around this. Plus it might make sense to move this out of Claro and into the Views CSS, as the JS that moves it around lives there.
Comment #12
mherchelI think I found a really good workaround for this.
display: nonein its initial keyframe, and the animation is set to fill backwards.display: none.So the net result is that the unstyled buttons will be invisible for 5s max. So, if JS is broken they'll pop in at that time.
Comment #13
mherchelNote that I placed this in both the Views UI module's CSS, and Claro's CSS (which overrides the Views UI CSS)
Comment #14
nod_ohh clever, i like that. Don't hesitate to make a class or something out of it (in claro/olivero at least, possibly core somewhere). All the MR doing the same thing will need it I think
Comment #15
smustgrave commentedNice!
Comment #16
smustgrave commentedSo should this be turned into a generic class to apply? Or good to mark?
Comment #17
mherchelI say no. If native CSS had the equivalent of Sass mixins, it'd be easy to do, but that's down the horizon. The current selector that we're using is
.views-tabs__action-list-button:not(.views-tabs--secondary *), which is somewhat complex, and would be more of a pain in the butt to replicate in templates/preprocess.Comment #18
smustgrave commentedTesting the new solution I'm still seeing the issue is resolved. May be bookmarking this solution.
Comment #20
xjmSo given #14 and #17 (and that Théo is a frontend framework manager), I think there should at least be a middle ground here where we at least document this somewhere on d.o in a way that will be helpful to the other places where it needs to be fixed, or create a followup issue to make a core addition that would also address @mherchel's concern. Thanks everyone!
Comment #21
mherchelI'm willing to create a class or do whatever it takes to get this done, but I do think doing so will be premature optimization at this point. I'm not 100% positive I know a place where we'd be able to re-use it.
I started a slack thread in the #contribute channel at https://drupal.slack.com/archives/C1BMUQ9U6/p1714158882541689
Comment #22
xjm#3443834: Investigate possibility of creating API, CSS class, reusable animation to help eliminate page jank addresses my concern. Thanks!
Restoring previous status, although I still think it's best if a FEFM reviews this one for commit.
Comment #23
nod_Comment #24
nod_Comment #25
mherchelJust pushed some changes with the comments.
As far as creating a CSS Variable, I'd like to push that over to #3443834: Investigate possibility of creating API, CSS class, reusable animation to help eliminate page jank. There we can also abstract the
@keyframesanimation. But my thought is that we'd probably want to create a new library, and we'd need to decide where that lives (within Claro, system, etc)... which to me seems out of scope of what we're doing here.Let me know if that's alright. If not, I can create the variable and put it in the views_ui.admin.css file.
Comment #26
nod_all good with me. I'm ok with the variable being in the follow-up, the keyframe stuff was going to be my next question :p let's do that in the other issue.
Comment #27
mherchelThanks! Putting back to RTBC per #18 since all that changed were code comments.
Comment #29
nod_Committed 299f4c8 and pushed to 11.x. Thanks!
I think that solution is pretty clever, could be good to have in a blog post somewhere :)
Comment #32
mherchelThanks! Yeah, I have one somewhat thought out in my head about reducing jank, and this would be a part of it. Just need to find time!
Comment #33
xjmThanks @nod_ and @mherchel!
Comment #36
xjmAmending attribution.