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:
parent
9aeffd7634
commit
06a636db37
@ -19,6 +19,7 @@
|
||||
v-if="enableEmojiPicker"
|
||||
ref="picker"
|
||||
:class="{ hide: !showPicker }"
|
||||
:showing="showPicker"
|
||||
:enable-sticker-picker="enableStickerPicker"
|
||||
class="emoji-picker-panel"
|
||||
@emoji="insert"
|
||||
|
@ -39,6 +39,10 @@ const EmojiPicker = {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showing: {
|
||||
required: true,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -48,7 +52,9 @@ const EmojiPicker = {
|
||||
showingStickers: false,
|
||||
groupsScrolledClass: 'scrolled-top',
|
||||
keepOpen: false,
|
||||
customEmojiTimeout: null
|
||||
customEmojiTimeout: null,
|
||||
// Lazy-load only after the first time `showing` becomes true.
|
||||
contentLoaded: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -115,6 +121,9 @@ const EmojiPicker = {
|
||||
this.$lozad = lozad('img', {})
|
||||
this.$lozad.observe()
|
||||
},
|
||||
waitForDomAndInitializeLazyLoad() {
|
||||
this.$nextTick(() => this.initializeLazyLoad())
|
||||
},
|
||||
destroyLazyLoad () {
|
||||
if (this.$lozad) {
|
||||
if (this.$lozad.observer) {
|
||||
@ -129,18 +138,23 @@ const EmojiPicker = {
|
||||
watch: {
|
||||
keyword () {
|
||||
this.onScroll()
|
||||
// Wait for the dom to change
|
||||
this.$nextTick(() => this.initializeLazyLoad())
|
||||
this.waitForDomAndInitializeLazyLoad()
|
||||
},
|
||||
allCustomGroups () {
|
||||
this.$nextTick(() => this.initializeLazyLoad())
|
||||
this.waitForDomAndInitializeLazyLoad()
|
||||
},
|
||||
showing (val) {
|
||||
if (val) {
|
||||
this.contentLoaded = true
|
||||
this.waitForDomAndInitializeLazyLoad()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.defaultGroup) {
|
||||
this.highlight(this.defaultGroup)
|
||||
}
|
||||
this.initializeLazyLoad()
|
||||
this.waitForDomAndInitializeLazyLoad()
|
||||
},
|
||||
destroyed () {
|
||||
this.destroyLazyLoad()
|
||||
|
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="emoji-picker panel panel-default panel-body">
|
||||
<div
|
||||
class="emoji-picker panel panel-default panel-body"
|
||||
>
|
||||
<div class="heading">
|
||||
<span class="emoji-tabs">
|
||||
<span
|
||||
@ -45,7 +47,10 @@
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-if="contentLoaded"
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="emoji-content"
|
||||
:class="{hidden: showingStickers}"
|
||||
|
Loading…
Reference in New Issue
Block a user