Avatar image flickering in VKUI component library on each re-render

47 Views Asked by At

I’m working with JavaScript and React, using the VKUI component library. I’ve encountered an issue where the images inside the Avatar component flicker on each re-render of the component. Here’s the custom component I’m using:

const Profile = ({ bingo }) => {
  return (<Div>
    <RichCell
      disabled
      before={<Avatar
        size={48}
        src={bingo.cr_ava}
      />}
      caption={bingo.cr_name}
      after={bingo.isHidden && 'Visibility limited' }
      afterCaption={bingo.isHidden && 'Hidden from feed' }
    >
      {bingo.title}
    </RichCell>
  </Div>)
}

This component is used in each item of a certain feed. The user’s avatar flickers.

I’ve tried to use a simple image and refrained from using the react-window library to reduce the number of re-renders. The flickering has decreased slightly, but it hasn’t disappeared. Any ideas on why this is happening and how to fix it?

0

There are 0 best solutions below