How to improve x-for speed in a combobox?

[ju5t]

We're using the headless combobox of AlpineJS as a country selector in combination with Livewire. There are two situations where it's a bit too slow for our liking:

• On initial page load in a fresh tab. Which is weird. I can't replicate this with a hard refresh.
• When searching. If you delete your query it loads all 250 entries and there is a noticeable delay. The typing cursor hangs for half a second or so. See my screen recording below.

This is our Alpine data:

Alpine.data('combobox', () => ({
    query: '',
    selected: null,
    options: [],
    get filtered() {
        return this.query === ''
            ? this.options
            : this.options.filter((option) => {
                return option.name.toLowerCase().includes(this.query.toLowerCase())
            })
    },
}))

And we filter through it using x-for="option in filtered".

Other things that may be relevant:

• Our options are loaded using @js($options)
• We use x-modelable together with wire:model. We don't use @entangle.

I don't feel like I can share the full component here as it's part of the paid headless components.

Is there anything I should or could have done to improve the speed of x-for or is this just what it is?

Screen recording

This shows what happens when I hold my delete button. There is a clear delay at the end.

[ekwoka]

You can slice the results to only show some, and maybe allow extending it, but definitely shouldn't just put a 250 in at once

You can generally incrementally add to the list at little cost. (doing 50 and then 100 isn't really total processing time slower than doing 100 at once, but will reduce skipped frames).

But mainly, just slice the list. x-for="option in options.slice(0,15)"

[ju5t]

Speed wise that's a lot beter, but it's not as friendly for the end user as I would like. They lose the ability to manually scroll through all countries. I could not support that if there are more than x amount of options, but even then, some options will be removed with slice when they may expect them to be there.

250 options doesn't feel like much, so this was a bit unexpected. I'm wondering how others make this work.

[ekwoka]

You could add auto loading when they reach the end pretty easily.

Another way is to not handle the visibility with x-for, just the initial looping.

Then you use x-show to hide them individually. So the x-for doesnt' actually reevaluate.