implement better timeline navigations with fades

This commit is contained in:
Nolan Lawson 2018-03-29 23:16:53 -07:00
parent 5426c5a0ef
commit 3b8f551477
19 changed files with 259 additions and 141 deletions

View file

@ -66,19 +66,6 @@ async function fetchTimelineItemsAndPossiblyFallBack () {
stop('fetchTimelineItemsAndPossiblyFallBack')
}
export function initializeTimeline () {
mark('initializeTimeline')
let instanceName = store.get('currentInstance')
let timeline = store.get('currentTimeline')
requestAnimationFrame(() => {
requestAnimationFrame(() => {
console.log('initialized')
store.setForTimeline(instanceName, timeline, {initialized: true})
})
})
stop('initializeTimeline')
}
export async function setupTimeline () {
mark('setupTimeline')
// If we don't have any item ids, or if the current item ids are stale

View file

@ -0,0 +1,54 @@
<!--
Same as TimelinePage.html, but needs to manage visibility of ComposeBox itself
without a div wrapper due to sticky-positioned compose button.
TODO: this is a bit hacky due to code duplication
-->
<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
{{#if hidePage}}
<LoadingPage />
{{/if}}
{{#if $currentVerifyCredentials }}
<ComposeBox realm="home" hidden="{{hidePage}}"/>
{{/if}}
<div class="timeline-home-anchor-container">
{{#if !hidePage && hideTimeline}}
<LoadingPage />
{{/if}}
<div class="timeline-home-reveal-container {{hideTimeline ? 'hidden' : ''}}">
<LazyTimeline timeline="home" />
</div>
</div>
</div>
<style>
.timeline-home-page, .timeline-home-anchor-container {
position: relative;
}
.timeline-home-reveal-container {
transition: opacity 0.2s linear; /* main page reveal */
}
</style>
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import { store } from '.././_store/store.js'
import LoadingPage from '../_components/LoadingPage.html'
import ComposeBox from '../_components/compose/ComposeBox.html'
export default {
oncreate () {
this.store.set({
timelineInitialized: false,
timelinePreinitialized: false
})
},
computed: {
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
},
store: () => store,
components: {
LazyTimeline,
LoadingPage,
ComposeBox
}
}
</script>

View file

@ -0,0 +1,47 @@
<div class="timeline-page" aria-busy="{{hideTimeline}}">
{{#if hidePage}}
<LoadingPage />
{{/if}}
<div class="timeline-slot-reveal-container {{hidePage ? 'hidden' : ''}}">
<slot></slot>
</div>
<div class="timeline-anchor-container">
{{#if !hidePage && hideTimeline}}
<LoadingPage />
{{/if}}
<div class="timeline-reveal-container {{hideTimeline ? 'hidden' : ''}}">
<LazyTimeline :timeline />
</div>
</div>
</div>
<style>
.timeline-page, .timeline-anchor-container {
position: relative;
}
.timeline-reveal-container, .timeline-slot-reveal-container {
transition: opacity 0.2s linear; /* main page reveal */
}
</style>
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import { store } from '.././_store/store.js'
import LoadingPage from '../_components/LoadingPage.html'
export default {
oncreate () {
this.store.set({
timelineInitialized: false,
timelinePreinitialized: false
})
},
computed: {
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
},
store: () => store,
components: {
LazyTimeline,
LoadingPage
}
}
</script>

View file

@ -1,4 +1,4 @@
<div class="compose-box {{overLimit ? 'over-char-limit' : ''}} {{realm === 'dialog' ? 'dialog-size' : '' }}">
<div class="{{className}} {{hideAndFadeIn}}">
<ComposeAuthor />
{{#if contentWarningShown}}
<div class="compose-content-warning-wrapper"
@ -12,11 +12,11 @@
<ComposeLengthIndicator :length :overLimit />
<ComposeMedia :realm :media />
</div>
<div class="compose-box-button-sentinel" ref:sentinel></div>
<div class="compose-box-button-wrapper" >
<div class="compose-box-button-sentinel {{hideAndFadeIn}}" ref:sentinel></div>
<div class="compose-box-button-wrapper {{hideAndFadeIn}}" >
<ComposeButton :length :overLimit :sticky on:click="onClickPostButton()" />
</div>
<div class="compose-box-border-bottom"></div>
<div class="compose-box-border-bottom {{hideAndFadeIn}}"></div>
<style>
.compose-box {
border-radius: 4px;
@ -40,6 +40,10 @@
max-width: calc(100vw - 60px);
}
.compose-box-fade-in {
transition: opacity 0.2s linear; /* main page reveal */
}
.compose-box-border-bottom {
height: 1px;
background: var(--main-border);
@ -91,6 +95,7 @@
import { slide } from 'svelte-transitions'
import { postStatus, insertHandleForReply } from '../../_actions/compose'
import { importDialogs } from '../../_utils/asyncModules'
import { classname } from '../../_utils/classname'
export default {
oncreate() {
@ -133,6 +138,19 @@
},
store: () => store,
computed: {
className: (overLimit, realm) => {
return classname(
'compose-box',
overLimit && 'over-char-limit',
realm === 'dialog' && 'dialog-size'
)
},
hideAndFadeIn: (hidden) => {
return classname(
'compose-box-fade-in',
hidden && 'hidden'
)
},
composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
text: (composeData) => composeData.text || '',
media: (composeData) => composeData.media || [],

View file

@ -1,4 +1,4 @@
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
<div class="pseudo-virtual-list" on:initialized ref:node>
{{#if wrappedItems}}
{{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem
@ -18,7 +18,6 @@
<style>
.pseudo-virtual-list {
position: relative;
transition: opacity 0.25s linear;
}
</style>
<script>
@ -51,8 +50,8 @@
console.log('allItemsHaveHeight', allItemsHaveHeight)
if (allItemsHaveHeight && !this.get('initialized')) {
this.set({initialized: true})
console.log('initializedVisibleItems')
this.fire('initializedVisibleItems')
console.log('initialized PseudoVirtualList')
this.fire('initialized')
}
})
stop('PseudoVirtualList oncreate()')

View file

@ -4,17 +4,13 @@
on:focusWithCapture="saveFocus(event)"
on:blurWithCapture="clearFocus(event)"
>
{{#if !$initialized}}
<LoadingPage />
{{/if}}
{{#if virtual}}
<VirtualList component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
shown="{{$initialized}}"
showFooter="{{$initialized && $runningUpdate}}"
showFooter="{{$timelineInitialized && $runningUpdate}}"
footerComponent="{{LoadingFooter}}"
showHeader="{{$showHeader}}"
headerComponent="{{MoreHeaderVirtualWrapper}}"
@ -22,7 +18,8 @@
on:scrollToBottom="onScrollToBottom()"
on:scrollToTop="onScrollToTop()"
on:scrollTopChanged="onScrollTopChanged(event)"
on:initializedVisibleItems="initialize()"
on:initialized="initialize()"
on:noNeedToScroll="onNoNeedToScroll()"
/>
{{else}}
{{#await importPseudoVirtualList}}
@ -35,20 +32,14 @@
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
shown="{{$initialized}}"
scrollToItem="{{scrollToItem}}"
on:initializedVisibleItems="initialize()"
on:initialized="initialize()"
/>
{{catch error}}
<div>Component failed to load. Try refreshing! {{error}}</div>
{{/await}}
{{/if}}
</div>
<style>
.timeline {
position: relative;
}
</style>
<script>
import { store } from '../../_store/store'
import StatusVirtualListItem from './StatusVirtualListItem.html'
@ -60,19 +51,18 @@
import { timelines } from '../../_static/timelines'
import { database } from '../../_database/database'
import {
initializeTimeline,
fetchTimelineItemsOnScrollToBottom,
setupTimeline,
showMoreItemsForTimeline,
showMoreItemsForThread,
showMoreItemsForCurrentTimeline
} from '../../_actions/timeline'
import LoadingPage from '../LoadingPage.html'
import { focusWithCapture, blurWithCapture } from '../../_utils/events'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks'
import { importPseudoVirtualList } from '../../_utils/asyncModules'
import isEqual from 'lodash/isEqual'
import { doubleRAF } from '../../_utils/doubleRAF'
export default {
oncreate() {
@ -154,8 +144,7 @@
},
store: () => store,
components: {
VirtualList,
LoadingPage
VirtualList
},
events: {
focusWithCapture,
@ -167,14 +156,18 @@
return
}
this.set({initializeStarted: true})
console.log('timeline initialize()')
initializeTimeline()
mark('initializeTimeline')
doubleRAF(() => {
console.log('timeline initialized')
this.store.set({timelineInitialized: true})
stop('initializeTimeline')
})
},
onScrollTopChanged(scrollTop) {
this.set({scrollTop: scrollTop})
},
onScrollToBottom() {
if (!this.store.get('initialized') ||
if (!this.store.get('timelineInitialized') ||
this.store.get('runningUpdate') ||
this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread
return
@ -289,6 +282,13 @@
})
})
},
onNoNeedToScroll() {
// If the timeline doesn't need to scroll, then we can safely "preinitialize,"
// i.e. render anything above the fold of the timeline. This avoids the affect
// where the scrollable content appears to jump around if we need to scroll it.
console.log('timeline preinitialized')
this.store.set({timelinePreinitialized: true})
}
}
}
</script>

View file

@ -1,5 +1,5 @@
<VirtualListContainer :realm :containerQuery >
<div class="virtual-list {{shown ? '' : 'hidden'}}"
<VirtualListContainer :realm :containerQuery on:initialized on:noNeedToScroll >
<div class="virtual-list"
style="height: {{$height}}px;"
ref:node >
<VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
@ -21,7 +21,6 @@
<style>
.virtual-list {
position: relative;
transition: opacity 0.25s linear;
}
</style>
<script>

View file

@ -6,6 +6,7 @@
import { mark, stop } from '../../_utils/marks'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { isMobile } from '../../_utils/isMobile'
import { doubleRAF } from '../../_utils/doubleRAF'
const SCROLL_EVENT_DELAY = 300
@ -26,9 +27,20 @@
console.log('forcing scroll top to ', scrollTop)
node.scrollTop = scrollTop
stop('set scrollTop')
doubleRAF(() => {
console.log('initialized VirtualList')
this.fire('initialized')
})
}
})
} else {
this.fire('noNeedToScroll')
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
console.log('initialized VirtualList')
this.fire('initialized')
}
})
this.store.setForRealm({
scrollHeight: node.scrollHeight,
offsetHeight: node.offsetHeight

View file

@ -1,24 +1,25 @@
{{#if $isUserLoggedIn}}
<DynamicPageBanner title="" />
{{#if $currentAccountProfile && $currentVerifyCredentials}}
<TimelinePage timeline="account/{{params.accountId}}">
<DynamicPageBanner title="" />
{{#if $currentAccountProfile && $currentVerifyCredentials}}
<AccountProfile account="{{$currentAccountProfile}}"
relationship="{{$currentAccountRelationship}}"
verifyCredentials="{{$currentVerifyCredentials}}"
/>
{{/if}}
<PinnedStatuses accountId="{{params.accountId}}" />
<LazyTimeline timeline='account/{{params.accountId}}' />
{{/if}}
<PinnedStatuses accountId="{{params.accountId}}" />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>Profile</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>Profile</h1>
<p>A user timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>A user timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -42,7 +43,7 @@
}
},
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner,

View file

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}}
{{#if $pinnedPage !== '/favorites'}}
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
{{/if}}
<LazyTimeline timeline='favorites' />
<TimelinePage timeline="favorites">
{{#if $pinnedPage !== '/favorites'}}
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
{{/if}}
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>Favorites</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>Favorites</h1>
<p>Your favorites will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>Your favorites will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

View file

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}}
{{#if $pinnedPage !== '/federated'}}
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
{{/if}}
<LazyTimeline timeline='federated' />
<TimelinePage timeline="federated">
{{#if $pinnedPage !== '/federated'}}
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
{{/if}}
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>Federated</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>Federated</h1>
<p>Your federated timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>Your federated timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

View file

@ -1,25 +1,18 @@
{{#if $isUserLoggedIn}}
{{#if $currentVerifyCredentials}}
<ComposeBox realm="home" />
{{/if}}
<LazyTimeline timeline='home' />
<TimelineHomePage/>
{{else}}
<NotLoggedInHome/>
{{/if}}
<style>
</style>
<script>
import NotLoggedInHome from '.././_components/NotLoggedInHome.html'
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import ComposeBox from '.././_components/compose/ComposeBox.html'
import { store } from '.././_store/store.js'
import TimelineHomePage from '../_components/TimelineHomePage.html'
export default {
store: () => store,
components: {
LazyTimeline,
NotLoggedInHome,
ComposeBox
TimelineHomePage
}
}
</script>

View file

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}}
{{#if $pinnedPage !== `/lists/${params.listId}`}}
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
{{/if}}
<LazyTimeline timeline='list/{{params.listId}}' />
<TimelinePage timeline="list/{{params.listId}}">
{{#if $pinnedPage !== `/lists/${params.listId}`}}
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
{{/if}}
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>List</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>List</h1>
<p>A list will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>A list will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -26,7 +27,7 @@
},
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

View file

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}}
{{#if $pinnedPage !== '/local'}}
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
{{/if}}
<LazyTimeline timeline='local' />
<TimelinePage timeline="local">
{{#if $pinnedPage !== '/local'}}
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
{{/if}}
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>Local</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>Local</h1>
<p>Your local timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>Your local timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

View file

@ -1,5 +1,5 @@
{{#if $isUserLoggedIn}}
<LazyTimeline timeline='notifications' />
<TimelinePage timeline="notifications" />
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -10,17 +10,17 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
import TimelinePage from '../_components/TimelinePage.html'
export default {
store: () => store,
components: {
LazyTimeline,
FreeTextLayout,
HiddenFromSSR
HiddenFromSSR,
TimelinePage
}
};
</script>

View file

@ -1,29 +1,30 @@
{{#if $isUserLoggedIn}}
<DynamicPageBanner title=""/>
<LazyTimeline timeline='status/{{params.statusId}}' />
<TimelinePage timeline="status/{{params.statusId}}">
<DynamicPageBanner title=""/>
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>Status</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>Status</h1>
<p>A status thread will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>A status thread will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../../_components/timeline/LazyTimeline.html'
import FreeTextLayout from '../../../_components/FreeTextLayout.html'
import { store } from '../../../_store/store.js'
import HiddenFromSSR from '../../../_components/HiddenFromSSR'
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
import TimelinePage from '../../../_components/TimelinePage.html'
export default {
store: () => store,
components: {
LazyTimeline,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner
DynamicPageBanner,
TimelinePage
}
}
</script>

View file

@ -1,17 +1,18 @@
{{#if $isUserLoggedIn}}
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
<LazyTimeline timeline='tag/{{params.tagName}}' />
<TimelinePage timeline="tag/{{params.tagName}}">
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
<h1>#{{params.tagName}}</h1>
<HiddenFromSSR>
<FreeTextLayout>
<h1>#{{params.tagName}}</h1>
<p>A hashtag timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
<p>A hashtag timeline will appear here when logged in.</p>
</FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -20,7 +21,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

View file

@ -11,7 +11,6 @@ function computeForTimeline (store, key, defaultValue) {
export function timelineComputations (store) {
computeForTimeline(store, 'timelineItemIds', null)
computeForTimeline(store, 'runningUpdate', false)
computeForTimeline(store, 'initialized', false)
computeForTimeline(store, 'lastFocusedElementSelector', null)
computeForTimeline(store, 'ignoreBlurEvents', false)
computeForTimeline(store, 'itemIdsToAdd', null)

View file

@ -0,0 +1,3 @@
export function doubleRAF (fn) {
requestAnimationFrame(() => requestAnimationFrame(fn))
}