emoji_picker: Improve rendering time of emoji picker by ~30%.

Fixes #25744

By rendering the emojis after initializing the simplebar container,
the rendering time is decreased by ~30% as observed at 6x CPU
cooldown on mac i7.
This commit is contained in:
Aman Agrawal 2023-09-13 08:00:48 +00:00 committed by Tim Abbott
parent 2f1561e3b8
commit 0723c56246
3 changed files with 19 additions and 9 deletions

View File

@ -4,6 +4,7 @@ import emoji_codes from "../../static/generated/emoji/emoji_codes.json";
import * as typeahead from "../shared/src/typeahead";
import render_emoji_popover from "../templates/emoji_popover.hbs";
import render_emoji_popover_content from "../templates/emoji_popover_content.hbs";
import render_emoji_popover_emoji_map from "../templates/emoji_popover_emoji_map.hbs";
import render_emoji_popover_search_results from "../templates/emoji_popover_search_results.hbs";
import render_emoji_showcase from "../templates/emoji_showcase.hbs";
@ -662,9 +663,18 @@ function get_default_emoji_popover_options() {
},
onMount(instance) {
const $popover = $(instance.popper);
// Render the emojis after simplebar has been initialized which
// saves us ~30% time rendering them.
$popover.find(".emoji-popover-emoji-map .simplebar-content").html(
render_emoji_popover_emoji_map({
message_id: current_message_id,
emoji_categories: complete_emoji_catalog,
is_status_emoji_popover: user_status_ui.user_status_picker_open(),
}),
);
refill_section_head_offsets($popover);
register_popover_events($popover);
show_emoji_catalog();
register_popover_events($popover);
change_focus_to_filter();
},
onHidden() {

View File

@ -9,14 +9,6 @@
{{/each}}
</div>
<div class="emoji-popover-emoji-map" data-simplebar data-simplebar-auto-hide="false" data-message-id="{{message_id}}">
{{#each emoji_categories }}
<div class="emoji-popover-subheading" data-section="{{name}}">{{name}}</div>
<div class="emoji-collection" data-section="{{name}}">
{{#each this.emojis }}
{{> emoji_popover_emoji type="emoji_picker_emoji" section=@../index index=@index message_id=../../message_id is_status_emoji_popover=../../is_status_emoji_popover emoji_dict=this}}
{{/each}}
</div>
{{/each}}
</div>
<div class="emoji-search-results-container" data-simplebar data-simplebar-auto-hide="false" data-message-id="{{message_id}}">
<div class="emoji-popover-results-heading">{{t "Search results" }}</div>

View File

@ -0,0 +1,8 @@
{{#each emoji_categories }}
<div class="emoji-popover-subheading" data-section="{{name}}">{{name}}</div>
<div class="emoji-collection" data-section="{{name}}">
{{#each this.emojis }}
{{> emoji_popover_emoji type="emoji_picker_emoji" section=@../index index=@index message_id=../../message_id is_status_emoji_popover=../../is_status_emoji_popover emoji_dict=this}}
{{/each}}
</div>
{{/each}}