Help with performance when scrolling fast

[thomastvedt]

I'm working on a list with infinite scroll and need some help with performance. When I scroll fast the list will be "blanked", and there is some delay before new items are rendered. See this video:

Screen.Recording.2024-10-24.at.13.03.41.mov

I tried adjusting increaseViewportBy and tested with scrollSeekConfiguration, but I can't really get the result I want. I guess I must be doing something wrong 🤔 Any hints on what to try next?

I'll paste some code too for more context:

Some code for more context:

<Virtuoso<TData, VirtualListContext>
  ref={virtuosoRef}
  customScrollParent={customScrollParent}
  style={style || { height: '100%' }}
  data={data}
  logLevel={LogLevel.DEBUG} // Useful for debugging virtual list performance, see hidden console log!
  itemContent={handleItemContent}
  endReached={handleEndReached}
  atBottomThreshold={20} // default = 4
  context={{
    loadingInternal: loadingInternal || loading || false,
    showSeparatorLines,
    addPadding,
    header,
    footer,
    empty,
    emptyPlaceholderText
  }}
  components={{
    List: CustomList,
    Item: CustomItem,
    Footer: CustomFooter,
    Header: CustomHeader,
    ScrollSeekPlaceholder: CustomScrollSeekPlaceholder
  }}
  {...rest}
/>

// eslint-disable-next-line react/display-name
const CustomItem = React.forwardRef<
  HTMLDivElement,
  ItemProps<unknown> & { context?: VirtualListContext }
>((props, ref) => {
  const { context, item, children, ...rest } = props;
  return (
    <CustomListItem
      ref={ref}
      className={'connect-virtual-list-item'}
      $isLast={false} // TODO: last item will have a border now, if we fix this the height must be the same with/without border!
      $showLines={props.context?.showSeparatorLines || false}
      $addPadding={props.context?.addPadding || false}
      {...rest}
    >
      {children}
    </CustomListItem>
  );
}) as <TData>(props: ItemProps<TData> & { ref?: React.Ref<HTMLDivElement> }) => ReactNode;
(CustomItem as React.ForwardRefExoticComponent<unknown>).displayName = 'CustomListItem';

const ExpandableListItemSimple: React.FC<Props> = ({
  title,
  expanded,
  onToggleExpanded,
  children,
  background
}) => {
  const renderedContent = useMemo(() => {
    if (!expanded) return null;
    return (
      <ContentGrid>
        <ExpandedContentCol>{children}</ExpandedContentCol>
      </ContentGrid>
    );
  }, [expanded, children]);

  return (
    <Container $background={background}>
      <HeaderGrid onClick={() => onToggleExpanded?.()}>
        <ArrowContainer>
          <Arrow $open={expanded} className={'connect-expand-arrow'} />
        </ArrowContainer>
        <Title>{title}</Title>
      </HeaderGrid>
      {renderedContent}
    </Container>
  );
};

export default memo(ExpandableListItemSimple);