search

cubing / cubing.js

🛠 A library for displaying and working with twisty puzzles. Also currently home to the code for Twizzle.
https://js.cubing.net/cubing/
GNU General Public License v3.0
232 stars 42 forks source link

[Feature request] Disable initial fade in of twisty-player #321

Open Wyverex42 opened 4 months ago

Wyverex42 commented 4 months ago

Goal

When showing a lot of twisty-players on a single page (e.g. for an overview of cases), all of the players fade in after page load. This basically creates a fullscreen flash effect which is not a very nice UX. I'd like to be able to disable this fade in.

Was this a purely cosmetic choice or is there a deeper reason for this fade, e.g. to hide the fact that some data is still loading?

Possible solution

Have a config property to disable the fade in

Alternatives

No response

lgarron commented 4 months ago

Was this a purely cosmetic choice or is there a deeper reason for this fade, e.g. to hide the fact that some data is still loading?

Both. There are a variety of reasons why a puzzle can take a while to load, not the least of which is a flaky network connection. In the future we'll almost certainly also want to consider optimizations that save time/battery life, by only loading players once they are close to the viewport. And once we get back to playing with VR and/or environments with multiple puzzles, we'll need some cues to indicate that puzzles are appearing and disappearing on purpose, rather than due to rendering glitches.

Even if the players each load instantly like image, I can't really prevent a flash by removing the fade-in. In fact, the transition will be even more sudden. Is that a desirable effect?

Wyverex42 commented 4 months ago

I totally agree with needing some form of loading indicator for various situations and I'm not asking to remove that. I understand that you can't guarantee loading to be finished within a certain timeframe and fading in is a good solution for that use case. I'm just proposing that giving the user control over that effect could improve usability for certain use cases like mine.

The question between having sudden or animated transitions starts to matter once you get into the realm of having lots of players in your view and they all finish loading at roughly the same time. The fade in causes a flash while a sudden transition could be perceived as a part of the page load. In fact, the fade makes it very clear that not everything is loaded at the same time, which is slightly distracting.

See attached video for a demonstration. A 60 fps video doesn't capture the effect entirely, it's much more visible on my 144 Hz screen. Basically, the grid loads so quickly that the fade-in artificially prolongs the perceived loading time.

https://github.com/cubing/cubing.js/assets/16905876/2d5f8c8f-17df-4f5e-b1c8-070955d53cce