tweak animation for revealing the timeline

This commit is contained in:
Nolan Lawson 2018-01-24 19:26:08 -08:00
parent d0391a6c0f
commit 98c0defacc
2 changed files with 21 additions and 8 deletions

View file

@ -8,6 +8,7 @@
footerComponent="{{LoadingFooter}}"
showFooter="{{initialized && runningUpdate}}"
storeKey="{{timeline}}"
on:initializedVisibleItems="initialize()"
/>
</div>
<style>
@ -45,13 +46,6 @@
} else {
this.addStatuses(await this.fetchStatusesAndPossiblyFallBack())
}
// TODO: this is just a guess. allVisibleItemsHaveHeight should be more accurate
requestAnimationFrame(() => {
requestAnimationFrame(() => {
this.set({initialized: true})
this.fire('initialized')
})
})
},
ondestroy() {
cachedTimelines[this.get('timeline')] = this.get('statusIds')
@ -85,6 +79,17 @@
methods: {
splice: splice,
push: push,
initialize() {
if (this.get('initialized') || !this.get('statusIds') || !this.get('statusIds').length) {
return
}
requestAnimationFrame(() => {
requestAnimationFrame(() => {
this.set({initialized: true})
this.fire('initialized')
})
})
},
async onScrollToBottom() {
if (!this.get('initialized')) {
return

View file

@ -44,6 +44,12 @@
}, SCROLL_TO_BOTTOM_DELAY)
})
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
this.fire('initializedVisibleItems')
}
})
let observedOnce = false
this.observe('distanceFromBottom', (distanceFromBottom) => {
@ -68,7 +74,9 @@
computed: {
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
return $scrollHeight - $scrollTop - $offsetHeight
}
},
// TODO: bug in svelte store, shouldn't need to do this
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
}
}
</script>