fix: large list performance

[huntabyte]

Closes: #45

This PR cleans up a few of the internals that would cause the page to crash if a large list was rendered. There is still a slight delay at the beginning of typing when trying to filter a large list that I haven't been able to solve just yet. Some of these things may be related to the DOM updates that have to occur.

I'd be thrilled if someone else could take a look into how we can make that seamless as well, but this is enough of an improvement to merge for the time being.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 4ae58fdb029095631a4ee2a91bb9e695d4d0f5b6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ------- | ----- | | cmdk-sv | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cmdk-sv	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 23, 2024 6:42pm

[FredrikAugust]

Hey! Any updates on this one? We're currently trying to render a list of ~500 elements, and it's currently hanging for a couple of seconds when we try to filter:)

[rogerfar]

Unfortunately we ran into the same issue, list with only 200 items takes about 2-3 seconds for the search to hang.

[MadeInPierre]

Hi! Just here to also say that my ~500 items list freezes the page with 100% CPU for ~5 seconds, unfortunately I don't have the skills to propose a fix myself.

Has anyone found a temporary workaround ? Even setting filter={() => 1} to attempt to bypass the built-in search algorithm does not have any effect.

[rogerfar]

Has anyone found a temporary workaround ? Event setting filter={() => 1} to attempt to bypass the built-in search algorithm does not have any effect.

I use customer filtering on the datasource which works perfect.

$: search = '';
$: groups = dataSource.filter(m => m.filter((m) => m.name.includes(search)

<Command.Input placeholder="Search..." bind:value={search} />
...
{#each groups as group}
    <Command.Item value={group.groupId}>{group.name}</Command.Item>
{/each}