diff --git a/routes/_components/status/StatusSpoiler.html b/routes/_components/status/StatusSpoiler.html index 95ae207..f60bb61 100644 --- a/routes/_components/status/StatusSpoiler.html +++ b/routes/_components/status/StatusSpoiler.html @@ -55,11 +55,13 @@ }, methods: { onClickSpoilerButton() { - let uuid = this.get('uuid') - let $spoilersShown = this.store.get('spoilersShown') - $spoilersShown[uuid] = !$spoilersShown[uuid] - this.store.set({'spoilersShown': $spoilersShown}) - this.fire('recalculateHeight') + requestAnimationFrame(() => { + let uuid = this.get('uuid') + let $spoilersShown = this.store.get('spoilersShown') + $spoilersShown[uuid] = !$spoilersShown[uuid] + this.store.set({'spoilersShown': $spoilersShown}) + this.fire('recalculateHeight') + }) } } } diff --git a/routes/_components/virtualList/VirtualListItem.html b/routes/_components/virtualList/VirtualListItem.html index 0be8a28..9240bbb 100644 --- a/routes/_components/virtualList/VirtualListItem.html +++ b/routes/_components/virtualList/VirtualListItem.html @@ -28,7 +28,13 @@ export default { oncreate() { - this.doRecalculateHeight() + let asyncLayout = new AsyncLayout(node => node.getAttribute('virtual-list-key')) + let key = this.get('key') + asyncLayout.observe(key, this.refs.node, (rect) => { + asyncLayout.disconnect() + // update all item heights in one batch for better perf + this.store.batchUpdateForRealm('itemHeights', key, rect.height) + }) }, store: () => virtualListStore, computed: { @@ -36,13 +42,13 @@ }, methods: { doRecalculateHeight() { - let asyncLayout = new AsyncLayout(node => node.getAttribute('virtual-list-key')) + // Recalculate immediately because this is done on-demand, e.g. + // when clicking the "More" button on a spoiler. + let rect = this.refs.node.getBoundingClientRect() let key = this.get('key') - asyncLayout.observe(key, this.refs.node, (rect) => { - asyncLayout.disconnect() - // update all item heights in one batch for better perf - this.store.batchUpdateForRealm('itemHeights', key, rect.height) - }) + let itemHeights = this.store.get('itemHeights') + itemHeights[key] = rect.height + this.store.setForRealm({itemHeights}) } } }