Remove the coupling between converse-controlbox and converse-rosterview

src/converse-controlbox.js

@@ -9,7 +9,6 @@
  */
 import "converse-chatview";
 import "converse-profile";
-import "converse-rosterview";
 import _FormData from "formdata-polyfill";
 import bootstrap from "bootstrap.native";
 import converse from "@converse/headless/converse-core";
@@ -197,9 +196,6 @@ converse.plugins.add('converse-controlbox', {
                 this.model.on('show', this.show, this);
                 this.model.on('change:closed', this.ensureClosedState, this);
                 this.render();
-                if (this.model.get('connected')) {
-                    this.insertRoster();
-                }
                 /**
                  * Triggered when the _converse.ControlBoxView has been initialized and therefore
                  * exists. The controlbox contains the login and register forms when the user is
@@ -238,18 +234,7 @@ converse.plugins.add('converse-controlbox', {
             onConnected () {
                 if (this.model.get('connected')) {
                     this.render();
-                    this.insertRoster();
-                }
-            },
-
-            insertRoster () {
-                if (_converse.authentication === _converse.ANONYMOUS) {
-                    return;
                 }
-                /* Place the rosterview inside the "Contacts" panel. */
-                _converse.api.waitUntil('rosterViewInitialized')
-                    .then(() => this.controlbox_pane.el.insertAdjacentElement('beforeEnd', _converse.rosterview.el))
-                    .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
             },
 
              createBrandHeadingHTML () {

src/converse-rosterview.js

@@ -951,6 +951,22 @@ converse.plugins.add('converse-rosterview', {
             _converse.chatboxes.on('change:hidden', chatbox => highlightRosterItem(chatbox));
         });
 
+
+        _converse.api.listen.on('controlboxInitialized', (view) => {
+            function insertRoster () {
+                if (!view.model.get('connected') || _converse.authentication === _converse.ANONYMOUS) {
+                    return;
+                }
+                /* Place the rosterview inside the "Contacts" panel. */
+                _converse.api.waitUntil('rosterViewInitialized')
+                    .then(() => view.controlbox_pane.el.insertAdjacentElement('beforeEnd', _converse.rosterview.el))
+                    .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
+            }
+            insertRoster();
+            view.model.on('change:connected', insertRoster);
+        });
+
+
         function initRoster () {
             /* Create an instance of RosterView once the RosterGroups
              * collection has been created (in @converse/headless/converse-core.js)