mirror of https://github.com/zulip/zulip.git
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:
parent
2f1561e3b8
commit
0723c56246
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}}
|
Loading…
Reference in New Issue