initial stab at smoother timeline navigation

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

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 {{shown ? '' : 'hidden'}}" on:initialized ref:node>
   {{#if wrappedItems}}
     {{#each wrappedItems as wrappedItem, i @item}}
       <PseudoVirtualListLazyItem
@@ -51,8 +51,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()')

routes/_components/timeline/LazyTimeline.html

@@ -1,7 +1,7 @@
 <div class="lazy-timeline">
   {{#await importTimeline}}
   {{then constructor}}
-    <:Component {constructor} :timeline />
+    <:Component {constructor} :timeline on:initialized />
   {{catch error}}
     <div>Component failed to load. Try refreshing! {{error}}</div>
   {{/await}}

routes/_components/timeline/Timeline.html

@@ -4,7 +4,7 @@
      on:focusWithCapture="saveFocus(event)"
      on:blurWithCapture="clearFocus(event)"
 >
-  {{#if !$initialized}}
+  {{#if !initialized}}
     <LoadingPage />
   {{/if}}
   {{#if virtual}}
@@ -13,8 +13,8 @@
                  containerQuery=".container"
                  :makeProps
                  items="{{$timelineItemIds}}"
-                 shown="{{$initialized}}"
-                 showFooter="{{$initialized && $runningUpdate}}"
+                 shown="{{initialized}}"
+                 showFooter="{{initialized && $runningUpdate}}"
                  footerComponent="{{LoadingFooter}}"
                  showHeader="{{$showHeader}}"
                  headerComponent="{{MoreHeaderVirtualWrapper}}"
@@ -22,7 +22,7 @@
                  on:scrollToBottom="onScrollToBottom()"
                  on:scrollToTop="onScrollToTop()"
                  on:scrollTopChanged="onScrollTopChanged(event)"
-                 on:initializedVisibleItems="initialize()"
+                 on:initialized="initialize()"
     />
   {{else}}
     {{#await importPseudoVirtualList}}
@@ -35,9 +35,9 @@
                  containerQuery=".container"
                  :makeProps
                  items="{{$timelineItemIds}}"
-                 shown="{{$initialized}}"
+                 shown="{{initialized}}"
                  scrollToItem="{{scrollToItem}}"
-                 on:initializedVisibleItems="initialize()"
+                 on:initialized="initialize()"
       />
     {{catch error}}
       <div>Component failed to load. Try refreshing! {{error}}</div>
@@ -60,7 +60,6 @@
   import { timelines } from '../../_static/timelines'
   import { database } from '../../_database/database'
   import {
-    initializeTimeline,
     fetchTimelineItemsOnScrollToBottom,
     setupTimeline,
     showMoreItemsForTimeline,
@@ -73,6 +72,7 @@
   import { mark, stop } from '../../_utils/marks'
   import { importPseudoVirtualList } from '../../_utils/asyncModules'
   import isEqual from 'lodash/isEqual'
+  import { doubleRAF } from '../../_utils/doubleRAF'
 
   export default {
     oncreate() {
@@ -167,14 +167,19 @@
           return
         }
         this.set({initializeStarted: true})
-        console.log('timeline initialize()')
-        initializeTimeline()
+        mark('initializeTimeline')
+        doubleRAF(() => {
+          console.log('timeline initialized')
+          this.set({initialized: true})
+          this.fire('initialized')
+          stop('initializeTimeline')
+        })
       },
       onScrollTopChanged(scrollTop) {
         this.set({scrollTop: scrollTop})
       },
       onScrollToBottom() {
-        if (!this.store.get('initialized') ||
+        if (!this.get('initialized') ||
             this.store.get('runningUpdate') ||
             this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread
           return

routes/_components/virtualList/VirtualList.html

@@ -1,4 +1,4 @@
-<VirtualListContainer :realm :containerQuery >
+<VirtualListContainer :realm :containerQuery on:initialized >
   <div class="virtual-list {{shown ? '' : 'hidden'}}"
        style="height: {{$height}}px;"
        ref:node >

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,19 @@
             console.log('forcing scroll top to ', scrollTop)
             node.scrollTop = scrollTop
             stop('set scrollTop')
+            doubleRAF(() => {
+              console.log('initialized VirtualList')
+              this.fire('initialized')
+            })
           }
         })
       } else {
+        this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+          if (allVisibleItemsHaveHeight) {
+            console.log('initialized VirtualList')
+            this.fire('initialized')
+          }
+        })
         this.store.setForRealm({
           scrollHeight: node.scrollHeight,
           offsetHeight: node.offsetHeight

routes/_pages/index.html

@@ -1,12 +1,17 @@
 {{#if $isUserLoggedIn}}
-  {{#if $currentVerifyCredentials}}
-    <ComposeBox realm="home" />
+  {{#if $currentVerifyCredentials }}
+    <div class="compose-box-reveal {{timelineInitialized ? '' : 'hidden'}}">
+      <ComposeBox realm="home" />
+    </div>
   {{/if}}
-  <LazyTimeline timeline='home' />
+  <LazyTimeline timeline='home' on:initialized="onTimelineInitialized()"/>
 {{else}}
   <NotLoggedInHome/>
 {{/if}}
 <style>
+  .compose-box-reveal {
+    transition: opacity 0.25s linear;
+  }
 </style>
 <script>
   import NotLoggedInHome from '.././_components/NotLoggedInHome.html'
@@ -20,6 +25,11 @@
 		  LazyTimeline,
 			NotLoggedInHome,
       ComposeBox
-		}
+		},
+    methods: {
+		  onTimelineInitialized() {
+		    this.set({timelineInitialized: true})
+      }
+    }
 	}
 </script>

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)

routes/_utils/doubleRAF.js

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