Defer rendering of the messages area and roster

until after we are sure that the user has actually entered the room

converse.css

@@ -17,10 +17,10 @@ img.spinner {
     padding: 0 5px 0 5px;
 }
 img.centered {
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 30%;
-    display: block;
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    margin: 0 0 0 -25%;
 }
 
 #chatpanel {

converse.js

@@ -1045,6 +1045,10 @@
                 '<p class="chatroom-topic"><p/>' +
             '</div>' +
             '<div class="chat-body">' +
+            '<img class="spinner centered" src="images/spinner.gif"/>' +
+            '</div>'),
+
+        chatarea_template: _.template(
             '<div class="chat-area">' +
                 '<div class="chat-content"></div>' +
                 '<form class="sendXMPPMessage" action="" method="post">' +
@@ -1054,9 +1058,20 @@
             '</div>' +
             '<div class="participants">' +
                 '<ul class="participant-list"></ul>' +
-                    '</div>' +
             '</div>'),
 
+        render: function () {
+            this.$el.attr('id', this.model.get('box_id'))
+                    .html(this.template(this.model.toJSON()));
+            return this;
+        },
+
+        renderChatArea: function () {
+            this.$el.find('img.spinner.centered').remove();
+            this.$el.find('.chat-body').append(this.chatarea_template());
+            return this;
+        },
+
         initialize: function () {
             converse.connection.muc.join(
                 this.model.get('jid'),
@@ -1218,6 +1233,9 @@
         },
 
         onChatRoomPresence: function (presence, room) {
+            if (!this.$el.find('.chat-area').length) {
+                this.renderChatArea();
+            }
             var nick = room.nick,
                 $presence = $(presence),
                 from = $presence.attr('from'), $item;
@@ -1371,6 +1389,9 @@
         ),
 
         onChatRoomRoster: function (roster, room) {
+            if (!this.$el.find('.chat-area').length) {
+                this.renderChatArea();
+            }
             var controlboxview = converse.chatboxesview.views.controlbox,
                 roster_size = _.size(roster),
                 $participant_list = this.$el.find('.participant-list'),
@@ -1385,12 +1406,6 @@
             }
             $participant_list.append(participants.join(""));
             return true;
-        },
-
-        render: function () {
-            this.$el.attr('id', this.model.get('box_id'))
-                    .html(this.template(this.model.toJSON()));
-            return this;
         }
     });