From 3b8f55147748b5b631a8e9bee67da82f8c59b4b5 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 29 Mar 2018 23:16:53 -0700
Subject: [PATCH] implement better timeline navigations with fades

---
 routes/_actions/timeline.js                   | 13 -----
 routes/_components/TimelineHomePage.html      | 54 +++++++++++++++++++
 routes/_components/TimelinePage.html          | 47 ++++++++++++++++
 routes/_components/compose/ComposeBox.html    | 26 +++++++--
 .../pseudoVirtualList/PseudoVirtualList.html  |  7 ++-
 routes/_components/timeline/Timeline.html     | 40 +++++++-------
 .../_components/virtualList/VirtualList.html  |  5 +-
 .../virtualList/VirtualListContainer.html     | 12 +++++
 routes/_pages/accounts/[accountId].html       | 27 +++++-----
 routes/_pages/favorites.html                  | 25 ++++-----
 routes/_pages/federated.html                  | 25 ++++-----
 routes/_pages/index.html                      | 13 ++---
 routes/_pages/lists/[listId].html             | 25 ++++-----
 routes/_pages/local.html                      | 25 ++++-----
 routes/_pages/notifications.html              |  8 +--
 routes/_pages/statuses/[statusId]/index.html  | 23 ++++----
 routes/_pages/tags/[tagName].html             | 21 ++++----
 .../computations/timelineComputations.js      |  1 -
 routes/_utils/doubleRAF.js                    |  3 ++
 19 files changed, 259 insertions(+), 141 deletions(-)
 create mode 100644 routes/_components/TimelineHomePage.html
 create mode 100644 routes/_components/TimelinePage.html
 create mode 100644 routes/_utils/doubleRAF.js

diff --git a/routes/_actions/timeline.js b/routes/_actions/timeline.js
index 2bdce461..176ef3ab 100644
--- 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
diff --git a/routes/_components/TimelineHomePage.html b/routes/_components/TimelineHomePage.html
new file mode 100644
index 00000000..26085770
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/routes/_components/TimelinePage.html b/routes/_components/TimelinePage.html
new file mode 100644
index 00000000..de9a7f65
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index 0615d604..5778228c 100644
--- 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 || [],
diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualList.html b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
index e783e42f..11b83350 100644
--- 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()')
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 853dc0ed..2fd003cc 100644
--- 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>
\ No newline at end of file
diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index 3257a6a3..1e4f6d09 100644
--- 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>
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index 9f3d7c49..efa3958f 100644
--- 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
diff --git a/routes/_pages/accounts/[accountId].html b/routes/_pages/accounts/[accountId].html
index 2288e170..585465a8 100644
--- 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,
diff --git a/routes/_pages/favorites.html b/routes/_pages/favorites.html
index 0b755d27..b09f62ac 100644
--- 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
diff --git a/routes/_pages/federated.html b/routes/_pages/federated.html
index a3b95a8e..6a0e1497 100644
--- 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
diff --git a/routes/_pages/index.html b/routes/_pages/index.html
index 0720f181..d15bfe72 100644
--- 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>
\ No newline at end of file
diff --git a/routes/_pages/lists/[listId].html b/routes/_pages/lists/[listId].html
index 7006ead9..c6078a0a 100644
--- 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
diff --git a/routes/_pages/local.html b/routes/_pages/local.html
index 03f78891..02982dc6 100644
--- 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
diff --git a/routes/_pages/notifications.html b/routes/_pages/notifications.html
index 6587ee33..ef241f94 100644
--- 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>
\ No newline at end of file
diff --git a/routes/_pages/statuses/[statusId]/index.html b/routes/_pages/statuses/[statusId]/index.html
index c9435aea..725cbf3e 100644
--- 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>
\ No newline at end of file
diff --git a/routes/_pages/tags/[tagName].html b/routes/_pages/tags/[tagName].html
index 378101d6..f6aacddb 100644
--- 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
diff --git a/routes/_store/computations/timelineComputations.js b/routes/_store/computations/timelineComputations.js
index 47990143..3edf6359 100644
--- 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)
diff --git a/routes/_utils/doubleRAF.js b/routes/_utils/doubleRAF.js
new file mode 100644
index 00000000..4aa9b9a6
--- /dev/null
+++ b/routes/_utils/doubleRAF.js
@@ -0,0 +1,3 @@
+export function doubleRAF (fn) {
+  requestAnimationFrame(() => requestAnimationFrame(fn))
+}