Long delay to update carousel indicators on mobile

[ben-brown-domaine]

Describe the bug

The indicator dots for the sl-carousel component update their state too slowly on mobile devices.

To Reproduce

Open https://shoelace.style/components/carousel/ on an iPhone and swipe to change slides on the carousels; you will see that there is a delay to update the inidcator dot status even after the animation finishes. It's even more noticeable if you change lots of slides quickly.

Browser / OS

Seeing this on real iPhone devices, haven't tested on Android yet

[KonnorRogers]

🤔 I wonder if this has to do with our scrollend polyfill

[claviska]

I believe this is a symptom of using scroll snapping. The indicator doesn't update until it "snaps" which takes time due to easing. I don't think it's something wen can fix using the existing strategy.

Pinging @alenaksu to see if my assumption is correct.

[alenaksu]

You are totally correct, when interacting with the carousel using touch, or mouse dragging, the indicator is updated when scroll ends. But I believe it could be improved somehow with minimal overhead.

I could take some time to create a poc and post it here

[ben-brown-domaine]

Let me know if I can help expedite getting this fixed

[alenaksu]

Hey everyone, I (finally) took sometime to look into this. Here are 2 POCs that aim to make the pagination dots more responsive. The first is a one line of code solution, while the second is a little experiment using animation-timeline, which unfortunately is still an experimental feature and it's not supported by all the browsers (for now).

Let me know what you think!

https://github.com/shoelace-style/shoelace/compare/alenaksu/poc/more-responsive-carousel-dots-2?expand=1 https://github.com/shoelace-style/shoelace/compare/alenaksu/poc/more-responsive-carousel-dots?expand=1