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");

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

@ -38,42 +38,40 @@
<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"> <div class="section-header">
<div class="section-header"> <span class="title">{{i18n "emoji_picker.recent"}}</span>
<span class="title">{{i18n "emoji_picker.recent"}}</span> {{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}}
{{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}} </div>
</div> <div class="section-group">
{{#each recentEmojis as |emoji|}}
{{replace-emoji (concat ":" emoji ":") (hash lazy=true)}}
{{/each}}
</div>
</div>
{{/if}}
{{emoji-group-sections}}
{{#each-in customEmojis as |group emojis|}}
<div class="section" data-section="custom-{{group}}">
<div class="section-header">
<span class="title">
{{i18n (concat "emoji_picker." group)}}
</span>
</div>
{{#if emojis.length}}
<div class="section-group"> <div class="section-group">
{{#each recentEmojis as |emoji|}} {{#each emojis as |emoji|}}
{{replace-emoji (concat ":" emoji ":") (hash lazy=true)}} <img title={{emoji.code}} width="20" height="20" loading="lazy" class="emoji" src={{emoji.src}}>
{{/each}} {{/each}}
</div> </div>
</div> {{/if}}
{{/if}} </div>
{{/each-in}}
{{emoji-group-sections}} </div>
{{#each-in customEmojis as |group emojis|}}
<div class="section" data-section="custom-{{group}}">
<div class="section-header">
<span class="title">
{{i18n (concat "emoji_picker." group)}}
</span>
</div>
{{#if emojis.length}}
<div class="section-group">
{{#each emojis as |emoji|}}
<img title={{emoji.code}} width="20" height="20" loading="lazy" class="emoji" src={{emoji.src}}>
{{/each}}
</div>
{{/if}}
</div>
{{/each-in}}
</div>
{{/conditional-loading-spinner}}
</div> </div>
<div class="emoji-picker-footer"> <div class="emoji-picker-footer">