implement better timeline navigations with fades

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/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>

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>

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-sentinel {{hideAndFadeIn}}" ref:sentinel></div>
-<div class="compose-box-button-wrapper" >
+<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 || [],

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')
+          console.log('initialized PseudoVirtualList')
-          this.fire('initializedVisibleItems')
+          this.fire('initialized')
         }
       })
       stop('PseudoVirtualList oncreate()')

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="{{$timelineInitialized && $runningUpdate}}"
-                 showFooter="{{$initialized && $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,
+      VirtualList
-      LoadingPage
     },
     events: {
       focusWithCapture,
@@ -167,14 +156,18 @@
           return
         }
         this.set({initializeStarted: true})
-        console.log('timeline initialize()')
+        mark('initializeTimeline')
-        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>

routes/_components/virtualList/VirtualList.html

@@ -1,5 +1,5 @@
-<VirtualListContainer :realm :containerQuery >
+<VirtualListContainer :realm :containerQuery on:initialized on:noNeedToScroll >
-  <div class="virtual-list {{shown ? '' : 'hidden'}}"
+  <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>

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

routes/_pages/accounts/[accountId].html

@@ -1,4 +1,5 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="account/{{params.accountId}}">
     <DynamicPageBanner title="" />
     {{#if $currentAccountProfile && $currentVerifyCredentials}}
     <AccountProfile account="{{$currentAccountProfile}}"
@@ -7,7 +8,7 @@
     />
     {{/if}}
     <PinnedStatuses accountId="{{params.accountId}}" />
-<LazyTimeline timeline='account/{{params.accountId}}' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -18,7 +19,7 @@
   </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,

routes/_pages/favorites.html

@@ -1,8 +1,9 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="favorites">
     {{#if $pinnedPage !== '/favorites'}}
       <DynamicPageBanner title="Favorites" icon="#fa-star"/>
     {{/if}}
-<LazyTimeline timeline='favorites' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -13,7 +14,7 @@
   </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

routes/_pages/federated.html

@@ -1,8 +1,9 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="federated">
     {{#if $pinnedPage !== '/federated'}}
       <DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
     {{/if}}
-<LazyTimeline timeline='federated' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -13,7 +14,7 @@
   </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

routes/_pages/index.html

@@ -1,25 +1,18 @@
 {{#if $isUserLoggedIn}}
-  {{#if $currentVerifyCredentials}}
+  <TimelineHomePage/>
-    <ComposeBox realm="home" />
-  {{/if}}
-  <LazyTimeline timeline='home' />
 {{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>

routes/_pages/lists/[listId].html

@@ -1,8 +1,9 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="list/{{params.listId}}">
     {{#if $pinnedPage !== `/lists/${params.listId}`}}
       <DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
     {{/if}}
-<LazyTimeline timeline='list/{{params.listId}}' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -13,7 +14,7 @@
   </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

routes/_pages/local.html

@@ -1,8 +1,9 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="local">
     {{#if $pinnedPage !== '/local'}}
       <DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
     {{/if}}
-<LazyTimeline timeline='local' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -13,7 +14,7 @@
   </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

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>

routes/_pages/statuses/[statusId]/index.html

@@ -1,6 +1,7 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="status/{{params.statusId}}">
     <DynamicPageBanner title=""/>
-<LazyTimeline timeline='status/{{params.statusId}}' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -11,19 +12,19 @@
   </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>

routes/_pages/tags/[tagName].html

@@ -1,6 +1,7 @@
 {{#if $isUserLoggedIn}}
+  <TimelinePage timeline="tag/{{params.tagName}}">
     <DynamicPageBanner title="{{'#' + params.tagName}}"/>
-<LazyTimeline timeline='tag/{{params.tagName}}' />
+  </TimelinePage>
 {{else}}
   <HiddenFromSSR>
     <FreeTextLayout>
@@ -11,7 +12,7 @@
   </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

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))
+}