Fix flashing of bookmarks on page load

src/headless/plugins/bookmarks/collection.js

@@ -175,7 +175,9 @@ const Bookmarks = {
         }
     },
 
-    getUnopenedBookmarks () {
+    async getUnopenedBookmarks () {
+        await api.waitUntil('bookmarksInitialized')
+        await api.waitUntil('chatBoxesFetched')
         return this.filter(b => !_converse.chatboxes.get(b.get('jid')));
     }
 }

src/plugins/bookmark-views/bookmarks-list.js

@@ -33,7 +33,7 @@ export default class BookmarksView extends CustomElement {
     }
 
     render () {
-        return _converse.bookmarks ? tpl_bookmarks_list(this) : '';
+        return _converse.bookmarks && this.model ? tpl_bookmarks_list(this) : '';
     }
 
     toggleBookmarksList (ev) {

src/plugins/bookmark-views/templates/list.js

@@ -2,14 +2,14 @@ import bookmark_item from './item.js';
 import { __ } from 'i18n';
 import { _converse } from '@converse/headless/core.js';
 import { html } from "lit";
+import { until } from 'lit/directives/until.js';
 
-export default (el) => {
-    const should_show = !!_converse.bookmarks.getUnopenedBookmarks().length;
+const list = (el, bookmarks) => {
     const desc_bookmarks = __('Click to toggle the bookmarks list');
     const label_bookmarks = __('Bookmarks');
     const toggle_state = el.model.get('toggle-state');
     return html`
-        <div class="list-container list-container--bookmarks ${ should_show ? 'fade-in' : 'hidden' }">
+        <div class="list-container list-container--bookmarks ${ bookmarks.length ? 'fade-in' : 'hidden' }">
             <a class="list-toggle bookmarks-toggle controlbox-padded"
                title="${desc_bookmarks}"
                @click=${() => el.toggleBookmarksList()}>
@@ -22,3 +22,8 @@ export default (el) => {
         </div>
     `;
 }
+
+export default (el) => {
+    const bookmarks = _converse.bookmarks.getUnopenedBookmarks();
+    return until(bookmarks.then((bookmarks) => list(el, bookmarks)), '');
+}