Closed justkahdri closed 6 months ago
Can you provide a minimal reproduction in a sandbox?
Not really, I couldn't make it work on a sandbox at all.
The issue seems to be when render a large value in the Command.Item. i have a subtitle Column being rendered which was showing lot of test data for each of the result, which was causing the issue. here also i think maybe the hit.overview
contains a large set of text and here when there are many results to show the app runs out of memory as they all are being rendered and attached to the DOM and are always present there.
Anyone have any ideas on solution here?
Are the query results too large? if so maybe virtualizing the list can solve it.
yep, virtualisation seems to be the only option here in this case. if there could be some config to enable it out of the bo it will be great as we might have Grouped command items as well so need to have virtualization works in all the cases properly. Or maybe just can add example for it to the Docs so that it's easily available for the user to implement.
Are the query results too large?
The list itself is not long because the limit
on the query is set to 5
so at worst cases is an Array of 5 elements.
hit.overview
is at most two paragraphs of plain text.
I don't know if there is a rough estimation of what could be a "large result"?
Anyone got an example of virtualizing the options list? I managed to do that with react-window
but it breaks the filtering functionality:
import { FixedSizeList as List } from 'react-window';
<Command>
<CommandInput placeholder={placeholder} />
<CommandEmpty>No results found.</CommandEmpty>
<CommandList className={'max-h-[200px] overflow-auto'}>
<List
itemSize={40}
height={200}
itemCount={options.length}
width={286}
>
{({ index, style }) => {
const option = options[index];
return (
<CommandItem
style={style}
key={option.value}
value={option.value}
onSelect={(currentValue, ...rest) => {
onChange(currentValue);
setOpen(false);
}}
>
<Check
className={cn(
'mr-2 h-4 w-4',
value === option.value ? 'opacity-100' : 'opacity-0',
)}
/>
{option.label}
</CommandItem>
);
}}
</List>
</CommandList>
</Command>
Has anyone figured out how to fix this? 🤔. My API returns also limited results (3-5 items) but with enough searches cmdk dies. Not sure what I'm doing wrong.
This seems to only be happening when using react-query 🤔
Ok I figured out, two issues I'm seeing. First is that even if I'm setting shouldFilter={false}
it still runs the filter function (even if it doesn't use the results).
If I do shouldFilter={false}
and pass a dummy filter like filter={() => 1}
the issue is completely gone.
The second issue is that command-score
apparently is incredibly slow when using things like aaaaaaaaaaaaaaaaaaaaaaaa
as I was using.
Confirming the observed behavior seen by @donferi. I have a very simple list (2 static items with a few words each) but when testing with asdf asdf asdf asdf ...
or aaaaaaaaaaaaa
around characters 30-50 it starts becoming noticeably slow then hangs the tab. In my case, I also didn't need any filter so setting filter={() => 1}
(in addition to shouldFilter={false}
) fixed it for me.
@Clarity-89 and for anyone looking into Virtualized lists, I think this example will help: https://github.com/oaarnikoivu/shadcn-virtualized-combobox/blob/main/src/components/virtualized-combobox.tsx
This example was shared in this issue: https://github.com/shadcn-ui/ui/issues/1127#issuecomment-1779825280
The second issue is that command-score apparently is incredibly slow when using things like aaaaaaaaaaaaaaaaaaaaaaaa as I was using.
This is now fixed.
@justkahdri Are you still seeing performance issues? A reproduction would be really helpful if so. I would like to improve the virtualization support, but let's close this issue in favor of one about virtualization instead if that's the main point here.
@pacocoursey No, it's working well now. Thanks for the support!
I'm combining React Query and Meilisearch with cmdk and the app freezes if I type something on the
Command.Input
that doesn't give any results on the query. The bug doesn't happen if I change theCommand.Item
for a commondiv
tag. Any ideas on what could I be doing wrong?Source code: