Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.44k stars 1.99k forks source link

Pattern Assembler: Janky shuffle experience #87114

Closed alaczek closed 7 hours ago

alaczek commented 10 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:

Steps to reproduce

  1. In the Patter Assembler on the pattern selection screen add at least two patterns.
  2. Click the shuffle option on the first one.
  3. 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 10 months ago

Support References

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

fushar commented 10 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):

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 10 months ago

📌 ACTIONS

miksansegundo commented 9 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 4 months ago

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

lsl commented 4 months 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 4 months 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 4 months ago

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

A few first impressions:

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 4 months ago

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

lsl commented 3 months 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.

taipeicoder commented 7 hours ago

Closing this as we are sunsetting the Site Assembler.