Lazy-load emoji picker in post form

When clicking the reply button, we used to load the whole emoji picker.
This causes a considerable delay even if the user is not going to use
the emoji picker. Now the content of the emoji picker is loaded only
after the user has explicitly opened the emoji picker.

Ref: grouped-emoji-picker
This commit is contained in:
Tusooa Zhu 2021-10-08 15:09:24 -04:00
parent 9aeffd7634
commit 06a636db37
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
3 changed files with 27 additions and 7 deletions

View File

@ -19,6 +19,7 @@
v-if="enableEmojiPicker" v-if="enableEmojiPicker"
ref="picker" ref="picker"
:class="{ hide: !showPicker }" :class="{ hide: !showPicker }"
:showing="showPicker"
:enable-sticker-picker="enableStickerPicker" :enable-sticker-picker="enableStickerPicker"
class="emoji-picker-panel" class="emoji-picker-panel"
@emoji="insert" @emoji="insert"

View File

@ -39,6 +39,10 @@ const EmojiPicker = {
required: false, required: false,
type: Boolean, type: Boolean,
default: false default: false
},
showing: {
required: true,
type: Boolean
} }
}, },
data () { data () {
@ -48,7 +52,9 @@ const EmojiPicker = {
showingStickers: false, showingStickers: false,
groupsScrolledClass: 'scrolled-top', groupsScrolledClass: 'scrolled-top',
keepOpen: false, keepOpen: false,
customEmojiTimeout: null customEmojiTimeout: null,
// Lazy-load only after the first time `showing` becomes true.
contentLoaded: false
} }
}, },
components: { components: {
@ -115,6 +121,9 @@ const EmojiPicker = {
this.$lozad = lozad('img', {}) this.$lozad = lozad('img', {})
this.$lozad.observe() this.$lozad.observe()
}, },
waitForDomAndInitializeLazyLoad() {
this.$nextTick(() => this.initializeLazyLoad())
},
destroyLazyLoad () { destroyLazyLoad () {
if (this.$lozad) { if (this.$lozad) {
if (this.$lozad.observer) { if (this.$lozad.observer) {
@ -129,18 +138,23 @@ const EmojiPicker = {
watch: { watch: {
keyword () { keyword () {
this.onScroll() this.onScroll()
// Wait for the dom to change this.waitForDomAndInitializeLazyLoad()
this.$nextTick(() => this.initializeLazyLoad())
}, },
allCustomGroups () { allCustomGroups () {
this.$nextTick(() => this.initializeLazyLoad()) this.waitForDomAndInitializeLazyLoad()
},
showing (val) {
if (val) {
this.contentLoaded = true
this.waitForDomAndInitializeLazyLoad()
}
} }
}, },
mounted () { mounted () {
if (this.defaultGroup) { if (this.defaultGroup) {
this.highlight(this.defaultGroup) this.highlight(this.defaultGroup)
} }
this.initializeLazyLoad() this.waitForDomAndInitializeLazyLoad()
}, },
destroyed () { destroyed () {
this.destroyLazyLoad() this.destroyLazyLoad()

View File

@ -1,5 +1,7 @@
<template> <template>
<div class="emoji-picker panel panel-default panel-body"> <div
class="emoji-picker panel panel-default panel-body"
>
<div class="heading"> <div class="heading">
<span class="emoji-tabs"> <span class="emoji-tabs">
<span <span
@ -45,7 +47,10 @@
</span> </span>
</span> </span>
</div> </div>
<div class="content"> <div
v-if="contentLoaded"
class="content"
>
<div <div
class="emoji-content" class="emoji-content"
:class="{hidden: showingStickers}" :class="{hidden: showingStickers}"