implement better timeline navigations with fades

2018-03-29 23:16:53 -07:00 · 2018-03-29 23:16:53 -07:00 · 3b8f551477
parent 5426c5a0ef
commit 3b8f551477
19 changed files with 259 additions and 141 deletions
--- a/routes/_actions/timeline.js
+++ b/routes/_actions/timeline.js
@ -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
--- a/routes/_components/TimelineHomePage.html
+++ b/routes/_components/TimelineHomePage.html
@ -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>
--- a/routes/_components/TimelinePage.html
+++ b/routes/_components/TimelinePage.html
@ -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>
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@ -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 || [],
--- a/routes/_components/pseudoVirtualList/PseudoVirtualList.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
@ -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()')
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@ -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>
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@ -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>
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@ -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
--- a/routes/_pages/accounts/[accountId].html
+++ b/routes/_pages/accounts/[accountId].html
@ -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,
--- a/routes/_pages/favorites.html
+++ b/routes/_pages/favorites.html
@ -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
--- a/routes/_pages/federated.html
+++ b/routes/_pages/federated.html
@ -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
--- a/routes/_pages/index.html
+++ b/routes/_pages/index.html
@ -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>
--- a/routes/_pages/lists/[listId].html
+++ b/routes/_pages/lists/[listId].html
@ -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
--- a/routes/_pages/local.html
+++ b/routes/_pages/local.html
@ -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
--- a/routes/_pages/notifications.html
+++ b/routes/_pages/notifications.html
@ -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>
--- a/routes/_pages/statuses/[statusId]/index.html
+++ b/routes/_pages/statuses/[statusId]/index.html
@ -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>
--- a/routes/_pages/tags/[tagName].html
+++ b/routes/_pages/tags/[tagName].html
@ -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
--- a/routes/_store/computations/timelineComputations.js
+++ b/routes/_store/computations/timelineComputations.js
@ -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)
--- a/routes/_utils/doubleRAF.js
+++ b/routes/_utils/doubleRAF.js
@ -0,0 +1,3 @@
+export function doubleRAF (fn) {
+  requestAnimationFrame(() => requestAnimationFrame(fn))
+}