Autocomplete unresponsive with large options dataset

[jer-0]

Current Behavior

Hello, svelte animate and transition directive are causing autocomplete to be slow and unresponsive when the options dataset is large.

Steps To Reproduce

stackblitz: https://stackblitz.com/edit/skeletonlabs-repl-wjppky?file=src/routes/+page.svelte

with animate and transition directive removed I didn't notice stuttering:

skeleton/src/lib/components/Autocomplete/Autocomplete.svelte

Line 117 in da5d299

<li class="autocomplete-item {classesItem}" animate:flip={{ duration }} transition:slide|local={{ duration }}>

Anything else?

tested on google chrome 111 & firefox 111 on windows 11 (Intel(R) Core(TM) i7-9750H CPU )

[endigo9740]

@jer-0 we're discussing some ideas for making transition animations both replaceable as well as optional. Very likely off-by-default, given the way it'll work. What we may do is disable the animation for this component temporarily until this new solution can be tested and implemented. Then restore them then.

Just wanted to note this here in case someone else picks up the ticket. Thanks for reporting!

[niktek]

slowdown.mp4

Confirmed on local copy - you can also see some artefacts of the animation towards the end as well

[Hugos68]

Could it be an idea to conditionally enable disable transitions wether they are inside the autocomplete list viewport using intersection observer? You only need to animate those that are in the viewport (usually a max of 15 items or so).