Picker is slow to load first time around

[craigbroadbear]

I am loading the picker on a menu click event, the first time it takes 2 or 3 seconds to display. These are the options I am using:

<Picker :data="emojiIndex"
                        :i18n="emojiI18n"
                        :native="true"
                        emoji="point_up"
                        set="google"
                        @select="showEmoji"/>

[serebrov]

@craigbroadbear I am not sure what is wrong just looking at this snippet. You can try comparing your code to the demos, the code for the demo is here.

[craigbroadbear]

The demo has the same issues if you change it to only show the popup picker.

[serebrov]

@craigbroadbear If you mean the initial loading process (clear cache, load the component for the first time), it is a network delay. The CSS code in the demo loads PNGs with emojis from unpkg like this:

.emoji-type-image.emoji-set-google {
  background-image: url('https://unpkg.com/emoji-datasource-google@15.0.1/img/google/sheets-256/64.png');
}

You can speed it up by self-hosting (and maybe preloading?) the sheet that you use. This is mentioned in the readme:

Note: CSS also includes background images for image-based emoji sets (apple, google, twitter, facebook). The images are loaded from the unpkg.com. To use self-hosted emojis sheet, override CSS like this:

/* load twitter sheet from own server */
.emoji-mart-body .emoji-type-image.emoji-set-twitter {
  background-image: url(/img/twitter-5.0.1-sheets-256-64.png);
}

[craigbroadbear]

I don't think that is the issue, as I am not loading any background png files, using native emoji mode. Also everything is on my local machine at this point.

The delay is some sort of initialization that is going on, as its fine after the first time the popup is displayed.

[craigbroadbear]

I have just been doing some more testing today and the speed seems fine!! The browser did update, maybe that had something to do with it. Using chrome on windows 11.