Pattern Assembler: Janky shuffle experience

alaczek commented 7 months ago

Quick summary

While shuffling a pattern in the Assembler, the one below it will very briefly jump up in the place of the pattern being shuffled. Quick video of the issue: https://video.wordpress.com/v/8ajwfs1X Reported in: pdtkmj-2l9-p2#comment-4189

Done means:

[ ] Pattern shuffling has a clean transition between patterns
[ ] Pattern shuffling doesn't scroll the page or move the shuffle button up or down

Steps to reproduce

In the Patter Assembler on the pattern selection screen add at least two patterns.
Click the shuffle option on the first one.
Notice that the pattern below briefly jumps up, then is pushed back down when the new pattern appears.

What you expected to happen

I expect the bottom pattern to stay in place while new pattern above is being loaded. If the new pattern added via shuffle is shorter than the previous one, then the pattern below should move up to fill the gap (perhaps slide up to make nice and smooth?).

What actually happened

The bottom pattern very briefly jumps up while new pattern is being loaded via shuffle option.

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

No response

github-actions[bot] commented 7 months ago

Support References

This comment is automatically generated. Please do not edit it.

[ ] pdtkmj-2l9-p2#comment-4189

fushar commented 7 months ago

I spent some time today to investigate this. After doing git bisect... this was introduced by this PR (which obviously can't be reverted):

https://github.com/Automattic/wp-calypso/pull/80929

We should make a call on the prioritization next week. I feel like the current experience is not good, but not really a blocker though.

cc: @Automattic/lego

liviopv commented 7 months ago

📌 ACTIONS

Marking as Triaged since the PR causing the issue has been identified and it's already on Lego's board.

miksansegundo commented 7 months ago

Just watched the video Ola posted about building sites with Relume library and saw their UX for replacing / shuffling patterns

https://github.com/Automattic/wp-calypso/assets/1881481/fee3a7a1-c252-47e5-85d2-49ce2d896ede

lsl commented 1 month ago

@fushar What would next steps / done look like for this issue?

lsl commented 1 month ago

Not really ready for development but want to make sure we look at this.

Does this need design or can we figure out a way to make this transition smoother on our own?

fushar commented 1 month ago

Thanks for looking.

The expected experience is that when we click on the shuffle button, it does not "flash" the whole preview. You can try to "feel" the current experience by going to wordpress.com/setup/assembler-first.

It does not need design; we just need to figure out a way to make this smoother. The challenge here is that we sync the pattern list with the URL. So, when we shuffle a pattern, the URL changes, and the component tries to re-sync with the URL. I suspect that makes the preview flashes.

lsl commented 1 month ago

Thanks for the link, first time I've actually seen assembler :smile: works really nice.

A few first impressions:

On shuffle, the pattern is swapped out too fast, it likely just needs a loading placeholder with a spinner for .5s with suitable padding to make it feel less jumpy. Or am I misunderstanding and that might not be possible to do?
On shuffle, the page preview is scrolling seemingly randomly, sometimes to the top, sometimes to the pattern above it. I'm guessing this could be fixed or at least helped with a placeholder?
On insert, it took me a while to realise it doesn't replace the current pattern in view instead inserting new ones below the fold. It's not really clear where the pattern was inserted, scrolling to and highlighting the pattern I inserted would be a lot better than showing a toast with semi technical jargon "Block pattern heading with three columns was inserted"

Let's limit this issue to the first two things, I'll create a new issue for the third but I am wondering if it's related to the shuffle scroll behavior.

lsl commented 1 month ago

Moving this back to Triaged as I know there is project coming to address and change a lot of this behavior.

lsl commented 1 month ago

Update: pekYwv-4wd-p2 We're going to be A/B testing the removal of Assembler, this won't be prioritized until after that. Keeping this open on low priority pending the outcome of that test.

Automattic / wp-calypso