Fix flashing of bookmarks on page load

This commit is contained in:
JC Brand 2022-04-19 22:29:23 +02:00
parent ce22508344
commit 2a9a01bc32
3 changed files with 12 additions and 5 deletions

View File

@ -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')));
}
}

View File

@ -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) {

View File

@ -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)), '');
}