Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-06 10:50:21 +08:00
Code Packages Activity Actions 9

UX: improved performance of emoji dialog

Browse source 
Shift all emoji loading into an animation frame to chrome stops deferring
timers
This commit is contained in:
Sam 2018-05-07 11:25:46 +10:00
parent aa6b779147
commit 911f898a23
1 changed files with 39 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

57
app/assets/javascripts/discourse/components/emoji-picker.js.es6
View file

@ -50,7 +50,7 @@ export default Ember.Component.extend({
this._positionPicker(); this._positionPicker();
this._scrollTo(); this._scrollTo();
this._updateSelectedDiversity(); this._updateSelectedDiversity();
this._checkVisibleSection(); this._checkVisibleSection(true);
}); });
}, },
@ -106,7 +106,7 @@ export default Ember.Component.extend({
} }
this._updateSelectedDiversity(); this._updateSelectedDiversity();
this._checkVisibleSection(); this._checkVisibleSection(true);
}, },
@observes("recentEmojis") @observes("recentEmojis")
@ -192,7 +192,7 @@ export default Ember.Component.extend({
_unbindEvents() { _unbindEvents() {
this.$().off(); this.$().off();
this.$(window).off("resize"); this.$(window).off("resize");
this.$modal.off("click"); clearInterval(this._refreshInterval);
$("#reply-control").off("div-resizing"); $("#reply-control").off("div-resizing");
$('html').off("mouseup.emoji-picker"); $('html').off("mouseup.emoji-picker");
}, },
@ -316,18 +316,27 @@ export default Ember.Component.extend({
}, },
_bindSectionsScroll() { _bindSectionsScroll() {
this.$list.on("scroll", () => { let onScroll = () => {
this.scrollPosition = this.$list.scrollTop();
run.debounce(this, this._checkVisibleSection, 50); run.debounce(this, this._checkVisibleSection, 50);
}); };
this.$list.on("scroll", onScroll);
this._refreshInterval = setInterval(onScroll, 100);
}, },
_checkVisibleSection() { _checkVisibleSection(force) {
// make sure we stop loading if picker has been removed // make sure we stop loading if picker has been removed
if(!this.$picker) { if(!this.$picker) {
return; return;
} }
const newPosition = this.$list.scrollTop();
if (newPosition === this.scrollPosition && !force) {
return;
}
this.scrollPosition = newPosition;
const $sections = this.$list.find(".section"); const $sections = this.$list.find(".section");
const listHeight = this.$list.innerHeight(); const listHeight = this.$list.innerHeight();
let $selectedSection; let $selectedSection;
@ -523,19 +532,31 @@ export default Ember.Component.extend({
}, },
_setButtonBackground(button, diversity) { _setButtonBackground(button, diversity) {
const $button = $(button);
const code = this._codeWithDiversity(
$button.attr("title"),
diversity || $button.hasClass("diversity")
);
// force visual reloading if needed if (!button) {
if($button.css("background-image") !== "none") { return;
$button.css("background-image", "");
} }
$button const $button = $(button);
.attr("data-loaded", 1) button = $button[0];
.css("background-image", `url("${emojiUrlFor(code)}")`);
// changing style can force layout events
// this could slow down timers and lead to
// chrome delaying the request
window.requestAnimationFrame(() =>{
const code = this._codeWithDiversity(
$button.attr("title"),
diversity || $button.hasClass("diversity")
);
// // force visual reloading if needed
if(button.style.backgroundImage !== "none") {
button.style.backgroundImage = "";
}
button.style.backgroundImage = `url("${emojiUrlFor(code)}")`;
$button.attr("data-loaded", 1);
});
}, },
}); });