Speed up rendering of chat boxes by lazily rendering the emoji picker

src/converse-chatboxes.js

@@ -443,8 +443,8 @@
 
                 showChat (attrs) {
                     /* Find the chat box and show it (if it may be shown).
-                    * If it doesn't exist, create it.
-                    */
+                     * If it doesn't exist, create it.
+                     */
                     const chatbox = this.getChatBox(attrs, true);
                     if (this.chatBoxMayBeShown(chatbox)) {
                         chatbox.trigger('show', true);

src/converse-chatview.js

@@ -275,6 +275,7 @@
                     this.model.on('sendMessage', this.sendMessage, this);
 
                     this.render().renderToolbar().insertHeading().fetchMessages();
+                    this.createEmojiPicker();
                     u.refreshWebkit();
                     _converse.emit('chatBoxOpened', this);
                     _converse.emit('chatBoxInitialized', this);
@@ -906,10 +907,13 @@
                     );
                     this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
 
+                    return this;
+                },
+
+                renderEmojiPicker () {
                     var toggle = this.el.querySelector('.toggle-smiley');
                     toggle.innerHTML = '';
                     toggle.appendChild(this.emoji_picker_view.render().el);
-                    return this;
                 },
 
                 focus () {
@@ -929,15 +933,15 @@
                         this.model.save();
                     }
                     this.setChatState(_converse.ACTIVE);
+                    this.renderEmojiPicker();
                     this.scrollDown();
                     if (focus) {
                         this.focus();
                     }
                 },
 
-                _show (focus) {
-                    /* Inner show method that gets debounced */
-                    if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
+                show (focus) {
+                    if (u.isVisible(this.el) && this.$el.css('opacity') === "1") {
                         if (focus) { this.focus(); }
                         return;
                     }
@@ -948,18 +952,6 @@
                     });
                 },
 
-                show (focus) {
-                    if (_.isUndefined(this.debouncedShow)) {
-                        /* We wrap the method in a debouncer and set it on the
-                         * instance, so that we have it debounced per instance.
-                         * Debouncing it on the class-level is too broad.
-                         */
-                        this.debouncedShow = _.debounce(this._show, 250, {'leading': true});
-                    }
-                    this.debouncedShow.apply(this, arguments);
-                    return this;
-                },
-
                 hideNewMessagesIndicator () {
                     const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator');
                     if (!_.isNull(new_msgs_indicator)) {

src/converse-muc.js

@@ -567,6 +567,7 @@
                 afterConnected () {
                     if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
                         this.setChatState(_converse.ACTIVE);
+                        this.renderEmojiPicker();
                         this.scrollDown();
                         this.focus();
                     }

src/converse-singleton.js

@@ -92,14 +92,14 @@
             },
 
             ChatBoxView: {
-                _show (focus) {
+                show (focus) {
                     /* We only have one chat visible at any one
                      * time. So before opening a chat, we make sure all other
                      * chats are hidden.
                      */
                     if (!this.model.get('hidden')) {
                         _.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat);
-                        return this.__super__._show.apply(this, arguments);
+                        return this.__super__.show.apply(this, arguments);
                     }
                 }
             },