I have a Virtual Scroll displaying a list of messages to the user (inbox, saved, deleted). Clicking on a button changes the filter, and the messages displayed. Looking for the best performance solution.
Is it better to have one virtual scroll component and a single data set, which is filtered to display certain items? Or would it be better to create three virtual scroll components with their own datasets, and just hide/show the appropriate one?
Here’s what my current dataset code looks like
private messages: Message[] = [];
get filteredMessages() {
return this.messages.filter((msg) => {
return msg.messageType === ~~this.selectedMessageType;
});
}
I’m debating about splitting this into three data sources that are immutable. I’m worried that this implementation is impacting performance. But that’s a lot of changes right now.