Long loading time; invocation of backgroundImageFn per emoji? passes wrong parameter to backgroundImageFn

[Aleeexx]

Hey guys!
Please take a look at the gif below. I'm wondering, why the backgroundImageFn is called multiple times (idk how many emojis there are but probably one invocation per emoji?) on opening the Picker - feels pretty laggy (actually the image is being downloaded in the background). Furthermore, the backgroundImageFn gets invoked on Emoji hover and on Emoji mouseleave but on mouseleave with wrong parameters? I have set the sheetSize manually to 32 but on mouseleave the backgroundImageFn is called with a sheetSize of 64?

The project's dependencies are:
Ngx Emoji Mart: 3.1.0
Angular: 9

<emoji-mart
  [backgroundImageFn]="backgroundImageFn"
  (emojiSelect)="addEmoji(...)"
  title="Wähle ein Emoji..."
  sheetSize="32"
></emoji-mart>

public backgroundImageFn: Emoji["backgroundImageFn"] = (set, sheetSize) => {
  console.log(set, sheetSize);
  return "assets/emoji_sheet_32.png";
};

[maxidirienzo]

Exactly the same behavior and picker is unresponsive for around 7 secs.

ctrl/ngx-emoji-mart version 4.1.0
Angular 11

[agiangrant]

I did some work on virtualizing the picker emojis as well as image URL Fn per emoji here #369. I am seeing much better results so far.