search

scttcper / ngx-emoji-mart

Customizable Slack-like emoji picker for Angular
https://ngx-emoji-mart.vercel.app
MIT License
450 stars 94 forks source link

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

Open Aleeexx opened 4 years ago

Aleeexx commented 4 years ago

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";
};

emojiMart

maxidirienzo commented 3 years ago

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

ctrl/ngx-emoji-mart version 4.1.0 Angular 11

agiangrant commented 3 years ago

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.