Don't wait for vcards before initializing the roster

src/headless/plugins/roster/filter.js

@@ -0,0 +1,11 @@
+import { Model } from '@converse/skeletor/src/model.js';
+
+export const RosterFilter = Model.extend({
+    initialize () {
+        this.set({
+            'filter_text': '',
+            'filter_type': 'contacts',
+            'chat_state': 'online'
+        });
+    }
+});

src/headless/plugins/roster/utils.js

@@ -1,24 +1,28 @@
 import log from "@converse/headless/log";
 import { Model } from '@converse/skeletor/src/model.js';
+import { RosterFilter } from '@converse/headless/plugins/roster/filter.js';
 import { _converse, api, converse } from "@converse/headless/core";
 import { initStorage } from '@converse/headless/utils/storage.js';
 
 const { $pres } = converse.env;
 
 
-async function initRoster () {
-    // Initialize the Bakcbone collections that represent the contats
-    // roster and the roster groups.
-    await api.waitUntil('VCardsInitialized');
-    _converse.roster = new _converse.RosterContacts();
+function initRoster () {
+    // Initialize the collections that represent the roster contacts and groups
+    const roster = _converse.roster = new _converse.RosterContacts();
     let id = `converse.contacts-${_converse.bare_jid}`;
-    initStorage(_converse.roster, id);
+    initStorage(roster, id);
+
+    const filter = _converse.roster_filter = new RosterFilter();
+    filter.id = `_converse.rosterfilter-${_converse.bare_jid}`;
+    initStorage(filter, filter.id);
+    filter.fetch();
 
-    _converse.roster.data = new Model();
     id = `converse-roster-model-${_converse.bare_jid}`;
-    _converse.roster.data.id = id;
-    initStorage(_converse.roster.data, id);
-    _converse.roster.data.fetch();
+    roster.data = new Model();
+    roster.data.id = id;
+    initStorage(roster.data, id);
+    roster.data.fetch();
     /**
      * Triggered once the `_converse.RosterContacts`
      * been created, but not yet populated with data.
@@ -102,7 +106,7 @@ export async function onClearSession () {
  * Roster specific event handler for the presencesInitialized event
  * @param { Boolean } reconnecting
  */
-export async function onPresencesInitialized (reconnecting) {
+export function onPresencesInitialized (reconnecting) {
     if (reconnecting) {
         /**
          * Similar to `rosterInitialized`, but instead pertaining to reconnection.
@@ -113,7 +117,7 @@ export async function onPresencesInitialized (reconnecting) {
          */
         api.trigger('rosterReadyAfterReconnection');
     } else {
-        await initRoster();
+        initRoster();
     }
     _converse.roster.onConnected();
     registerPresenceHandler();

src/headless/plugins/vcard/index.js

@@ -76,12 +76,13 @@ converse.plugins.add('converse-vcard', {
             }
         });
 
-        api.listen.on('chatRoomInitialized', m => {
+        api.listen.on('chatRoomInitialized', (m) => {
             setVCardOnModel(m)
             m.occupants.forEach(setVCardOnOccupant);
             m.listenTo(m.occupants, 'add', setVCardOnOccupant);
             m.listenTo(m.occupants, 'change:image_hash', o => onOccupantAvatarChanged(o));
         });
+
         api.listen.on('chatBoxInitialized', m => setVCardOnModel(m));
         api.listen.on('chatRoomMessageInitialized', m => setVCardOnMUCMessage(m));
         api.listen.on('addClientFeatures', () => api.disco.own.features.add(Strophe.NS.VCARD));

src/plugins/profile/statusview.js

@@ -8,8 +8,8 @@ class Profile extends CustomElement {
 
     initialize () {
         this.model = _converse.xmppstatus;
-        this.listenTo(this.model, "vcard:add", this.requestUpdate);
         this.listenTo(this.model, "change", this.requestUpdate);
+        this.listenTo(this.model, "vcard:add", this.requestUpdate);
         this.listenTo(this.model, "vcard:change", this.requestUpdate);
     }
 

src/plugins/rosterview/contactview.js

@@ -1,4 +1,4 @@
-import log from "@converse/headless/log";
+import log from "@converse/headless/log.js";
 import tpl_pending_contact from "./templates/pending_contact.js";
 import tpl_requesting_contact from "./templates/requesting_contact.js";
 import tpl_roster_item from "./templates/roster_item.js";
@@ -17,11 +17,11 @@ export default class RosterContact extends CustomElement {
         }
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.listenTo(this.model, "change", this.requestUpdate);
-        this.listenTo(this.model, "highlight", this.requestUpdate);
-        this.listenTo(this.model, 'vcard:change', this.requestUpdate);
+    initialize () {
+        this.listenTo(this.model, "change", () => this.requestUpdate());
+        this.listenTo(this.model, "highlight", () => this.requestUpdate());
+        this.listenTo(this.model, 'vcard:add', () => this.requestUpdate());
+        this.listenTo(this.model, 'vcard:change', () => this.requestUpdate());
     }
 
     render () {

src/plugins/rosterview/filterview.js

@@ -1,47 +1,34 @@
 import debounce from "lodash-es/debounce";
 import tpl_roster_filter from "./templates/roster_filter.js";
 import { CustomElement } from 'shared/components/element.js';
-import { Model } from '@converse/skeletor/src/model.js';
 import { _converse, api } from "@converse/headless/core";
 import { ancestor } from 'utils/html.js';
-import { initStorage } from '@converse/headless/utils/storage.js';
 
-export const RosterFilter = Model.extend({
-    initialize () {
-        this.set({
-            'filter_text': '',
-            'filter_type': 'contacts',
-            'chat_state': 'online'
-        });
-    }
-});
 
 export class RosterFilterView extends CustomElement {
 
-    initialize () {
-        const model = new _converse.RosterFilter();
-        model.id = `_converse.rosterfilter-${_converse.bare_jid}`;
-        initStorage(model, model.id);
-        this.model = model;
-        _converse.roster_filter = model;
+    async initialize () {
+        await api.waitUntil('rosterInitialized')
+        this.model = _converse.roster_filter;
 
         this.liveFilter = debounce(() => {
             this.model.save({'filter_text': this.querySelector('.roster-filter').value});
         }, 250);
 
-        this.listenTo(_converse, 'rosterContactsFetched', this.requestUpdate);
-        this.listenTo(_converse.presences, 'change:show', this.requestUpdate);
-        this.listenTo(_converse.roster, "add", this.requestUpdate);
-        this.listenTo(_converse.roster, "destroy", this.requestUpdate);
-        this.listenTo(_converse.roster, "remove", this.requestUpdate);
+        this.listenTo(_converse, 'rosterContactsFetched', () => this.requestUpdate());
+        this.listenTo(_converse.presences, 'change:show', () => this.requestUpdate());
+        this.listenTo(_converse.roster, "add", () => this.requestUpdate());
+        this.listenTo(_converse.roster, "destroy", () => this.requestUpdate());
+        this.listenTo(_converse.roster, "remove", () => this.requestUpdate());
         this.listenTo(this.model, 'change', this.dispatchUpdateEvent);
-        this.listenTo(this.model, 'change', this.requestUpdate);
+        this.listenTo(this.model, 'change', () => this.requestUpdate());
 
-        this.model.fetch();
+        this.requestUpdate();
     }
 
     render () {
-        return tpl_roster_filter(
+        return this.model ?
+        tpl_roster_filter(
             Object.assign(this.model.toJSON(), {
                 visible: this.shouldBeVisible(),
                 changeChatStateFilter: ev => this.changeChatStateFilter(ev),
@@ -49,7 +36,7 @@ export class RosterFilterView extends CustomElement {
                 clearFilter: ev => this.clearFilter(ev),
                 liveFilter: ev => this.liveFilter(ev),
                 submitFilter: ev => this.submitFilter(ev),
-            }));
+            })) : '';
     }
 
     dispatchUpdateEvent () {

src/plugins/rosterview/index.js

@@ -8,7 +8,8 @@ import "@converse/headless/plugins/roster/index.js";
 import "modals/add-contact.js";
 import './rosterview.js';
 import RosterContactView from './contactview.js';
-import { RosterFilter, RosterFilterView } from './filterview.js';
+import { RosterFilter } from '@converse/headless/plugins/roster/filter.js';
+import { RosterFilterView } from './filterview.js';
 import { _converse, api, converse } from "@converse/headless/core";
 import { highlightRosterItem } from './utils.js';