finish timeline fixes

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:initialized 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>

routes/_components/timeline/LazyTimeline.html

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

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}}"
@@ -23,6 +19,7 @@
                  on:scrollToTop="onScrollToTop()"
                  on:scrollTopChanged="onScrollTopChanged(event)"
                  on:initialized="initialize()"
+                 on:noNeedToScroll="onNoNeedToScroll()"
     />
   {{else}}
     {{#await importPseudoVirtualList}}
@@ -35,7 +32,6 @@
                  containerQuery=".container"
                  :makeProps
                  items="{{$timelineItemIds}}"
-                 shown="{{initialized}}"
                  scrollToItem="{{scrollToItem}}"
                  on:initialized="initialize()"
       />
@@ -44,11 +40,6 @@
     {{/await}}
   {{/if}}
 </div>
-<style>
-  .timeline {
-    position: relative;
-  }
-</style>
 <script>
   import { store } from '../../_store/store'
   import StatusVirtualListItem from './StatusVirtualListItem.html'
@@ -66,7 +57,6 @@
     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'
@@ -154,8 +144,7 @@
     },
     store: () => store,
     components: {
-      VirtualList,
+      VirtualList
-      LoadingPage
     },
     events: {
       focusWithCapture,
@@ -170,8 +159,7 @@
         mark('initializeTimeline')
         doubleRAF(() => {
           console.log('timeline initialized')
-          this.set({initialized: true})
+          this.store.set({timelineInitialized: true})
-          this.fire('initialized')
           stop('initializeTimeline')
         })
       },
@@ -179,7 +167,7 @@
         this.set({scrollTop: scrollTop})
       },
       onScrollToBottom() {
-        if (!this.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
@@ -294,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 on:initialized >
+<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

@@ -34,6 +34,7 @@
           }
         })
       } else {
+        this.fire('noNeedToScroll')
         this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
           if (allVisibleItemsHaveHeight) {
             console.log('initialized VirtualList')

routes/_pages/accounts/[accountId].html

@@ -1,24 +1,25 @@
 {{#if $isUserLoggedIn}}
-<DynamicPageBanner title="" />
+  <TimelinePage timeline="account/{{params.accountId}}">
+    <DynamicPageBanner title="" />
     {{#if $currentAccountProfile && $currentVerifyCredentials}}
     <AccountProfile account="{{$currentAccountProfile}}"
                     relationship="{{$currentAccountRelationship}}"
                     verifyCredentials="{{$currentVerifyCredentials}}"
     />
     {{/if}}
-<PinnedStatuses accountId="{{params.accountId}}" />
+    <PinnedStatuses accountId="{{params.accountId}}" />
-<LazyTimeline timeline='account/{{params.accountId}}' />
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Profile</h1>
 
       <p>A user timeline will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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,19 +1,20 @@
 {{#if $isUserLoggedIn}}
-{{#if $pinnedPage !== '/favorites'}}
+  <TimelinePage timeline="favorites">
+    {{#if $pinnedPage !== '/favorites'}}
       <DynamicPageBanner title="Favorites" icon="#fa-star"/>
-{{/if}}
+    {{/if}}
-<LazyTimeline timeline='favorites' />
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Favorites</h1>
 
       <p>Your favorites will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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,19 +1,20 @@
 {{#if $isUserLoggedIn}}
-{{#if $pinnedPage !== '/federated'}}
+  <TimelinePage timeline="federated">
+    {{#if $pinnedPage !== '/federated'}}
       <DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
-{{/if}}
+    {{/if}}
-<LazyTimeline timeline='federated' />
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Federated</h1>
 
       <p>Your federated timeline will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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,35 +1,18 @@
 {{#if $isUserLoggedIn}}
-  {{#if $currentVerifyCredentials }}
+  <TimelineHomePage/>
-    <div class="compose-box-reveal {{timelineInitialized ? '' : 'hidden'}}">
-      <ComposeBox realm="home" />
-    </div>
-  {{/if}}
-  <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'
-  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
-		},
-    methods: {
-		  onTimelineInitialized() {
-		    this.set({timelineInitialized: true})
-      }
 		}
 	}
 </script>

routes/_pages/lists/[listId].html

@@ -1,19 +1,20 @@
 {{#if $isUserLoggedIn}}
-{{#if $pinnedPage !== `/lists/${params.listId}`}}
+  <TimelinePage timeline="list/{{params.listId}}">
+    {{#if $pinnedPage !== `/lists/${params.listId}`}}
       <DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
-{{/if}}
+    {{/if}}
-<LazyTimeline timeline='list/{{params.listId}}' />
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>List</h1>
 
       <p>A list will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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,19 +1,20 @@
 {{#if $isUserLoggedIn}}
-{{#if $pinnedPage !== '/local'}}
+  <TimelinePage timeline="local">
+    {{#if $pinnedPage !== '/local'}}
       <DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
-{{/if}}
+    {{/if}}
-<LazyTimeline timeline='local' />
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Local</h1>
 
       <p>Your local timeline will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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,29 +1,30 @@
 {{#if $isUserLoggedIn}}
-<DynamicPageBanner title=""/>
+  <TimelinePage timeline="status/{{params.statusId}}">
-<LazyTimeline timeline='status/{{params.statusId}}' />
+    <DynamicPageBanner title=""/>
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Status</h1>
 
       <p>A status thread will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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,17 +1,18 @@
 {{#if $isUserLoggedIn}}
-<DynamicPageBanner title="{{'#' + params.tagName}}"/>
+  <TimelinePage timeline="tag/{{params.tagName}}">
-<LazyTimeline timeline='tag/{{params.tagName}}' />
+    <DynamicPageBanner title="{{'#' + params.tagName}}"/>
+  </TimelinePage>
 {{else}}
-<HiddenFromSSR>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>#{{params.tagName}}</h1>
 
       <p>A hashtag timeline will appear here when logged in.</p>
     </FreeTextLayout>
-</HiddenFromSSR>
+  </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/_utils/doubleRAF.js

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