Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Remove loading spinner from emoji picker (#16064) 

Emoji picker doesn't load external data, so this didn't provide much value to users (and just delayed displaying the list by 50ms+)
This commit is contained in:
Jarek Radosz 2022-02-28 15:37:31 +01:00 committed by GitHub
parent 1a5c6f7632
commit 7c4be7f649
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/emoji-picker.js
View File

@ -36,7 +36,6 @@ export default Component.extend({
recentEmojis: null, recentEmojis: null,
hoveredEmoji: null, hoveredEmoji: null,
isActive: false, isActive: false,
isLoading: true,
usePopper: true, usePopper: true,
initialFilter: "", initialFilter: "",
@ -79,7 +78,6 @@ export default Component.extend({
@action @action
onShow() { onShow() {
this.set("isLoading", true);
this.set("recentEmojis", this.emojiStore.favorites); this.set("recentEmojis", this.emojiStore.favorites);
schedule("afterRender", () => { schedule("afterRender", () => {
@ -135,8 +133,6 @@ export default Component.extend({
// this is a low-tech trick to prevent appending hundreds of emojis // this is a low-tech trick to prevent appending hundreds of emojis
// of blocking the rendering of the picker // of blocking the rendering of the picker
later(() => { later(() => {
this.set("isLoading", false);
schedule("afterRender", () => { schedule("afterRender", () => {
if (!this.site.isMobileDevice || this.isEditorFocused) { if (!this.site.isMobileDevice || this.isEditorFocused) {
const filter = emojiPicker.querySelector("input.filter"); const filter = emojiPicker.querySelector("input.filter");

2
app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
View File

@ -38,7 +38,6 @@
<div class="emoji-picker-emoji-area" role="button" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}> <div class="emoji-picker-emoji-area" role="button" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
<div class="results"></div> <div class="results"></div>
{{#conditional-loading-spinner condition=isLoading}}
<div class="emojis-container"> <div class="emojis-container">
{{#if recentEmojis.length}} {{#if recentEmojis.length}}
<div class="section recent" data-section="recent"> <div class="section recent" data-section="recent">
@ -73,7 +72,6 @@
</div> </div>
{{/each-in}} {{/each-in}}
</div> </div>
{{/conditional-loading-spinner}}
</div> </div>
<div class="emoji-picker-footer"> <div class="emoji-picker-footer">