fix empty timelines

routes/_actions/timeline.js

@@ -63,7 +63,7 @@ export function initializeTimeline() {
 
 export async function setupTimeline() {
   mark('setupTimeline')
-  if (!store.get('timelineItemIds').length) {
+  if (!store.get('timelineItemIds')) {
     await fetchTimelineItemsAndPossiblyFallBack()
   }
   stop('setupTimeline')

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -1,17 +1,19 @@
 <div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
-  {{#each wrappedItems as wrappedItem, i @item}}
-    <PseudoVirtualListLazyItem
-      component="{{component}}"
-      index="{{i}}"
-      length="{{wrappedItems.length}}"
-      makeProps="{{makeProps}}"
-      key="{{wrappedItem.item}}"
-      intersectionObserver="{{intersectionObserver}}"
-      isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
-      isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
-      height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
-    />
-  {{/each}}
+  {{#if wrappedItems}}
+    {{#each wrappedItems as wrappedItem, i @item}}
+      <PseudoVirtualListLazyItem
+        component="{{component}}"
+        index="{{i}}"
+        length="{{wrappedItems.length}}"
+        makeProps="{{makeProps}}"
+        key="{{wrappedItem.item}}"
+        intersectionObserver="{{intersectionObserver}}"
+        isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
+        isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
+        height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
+      />
+    {{/each}}
+  {{/if}}
 </div>
 <style>
   .pseudo-virtual-list {
@@ -114,9 +116,9 @@
       }
     },
     computed: {
-      wrappedItems: (items) => items.map(item => ({item: item})),
+      wrappedItems: (items) => items && items.map(item => ({item: item})),
       allItemsHaveHeight: (items, $intersectionStates) => {
-        if (!items.length) {
+        if (!items) {
           return false
         }
         for (let item of items) {

routes/_components/timeline/Timeline.html

@@ -111,7 +111,7 @@
     },
     methods: {
       initialize() {
-        if (this.store.get('initialized') || !this.store.get('timelineItemIds') || !this.store.get('timelineItemIds').length) {
+        if (this.store.get('initialized') || !this.store.get('timelineItemIds')) {
           return
         }
         console.log('timeline initialize()')

routes/_components/virtualList/VirtualList.html

@@ -1,13 +1,15 @@
 <!-- TODO: setting height is hacky, just make this element the scroller -->
 <div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
-  {{#each $visibleItems as visibleItem @key}}
-    <VirtualListLazyItem :component
-                         offset="{{visibleItem.offset}}"
-                         makeProps="{{makeProps}}"
-                         key="{{visibleItem.key}}"
-                         index="{{visibleItem.index}}"
-    />
-  {{/each}}
+  {{#if $visibleItems}}
+    {{#each $visibleItems as visibleItem @key}}
+      <VirtualListLazyItem :component
+                           offset="{{visibleItem.offset}}"
+                           makeProps="{{makeProps}}"
+                           key="{{visibleItem.key}}"
+                           index="{{visibleItem.index}}"
+      />
+    {{/each}}
+  {{/if}}
   {{#if $showFooter}}
     <VirtualListFooter component="{{footerComponent}}"/>
   {{/if}}

routes/_components/virtualList/virtualListStore.js

@@ -11,7 +11,7 @@ class VirtualListStore extends RealmStore {
 
 const virtualListStore = new VirtualListStore()
 
-virtualListStore.computeForRealm('items', [])
+virtualListStore.computeForRealm('items', null)
 virtualListStore.computeForRealm('showFooter', false)
 virtualListStore.computeForRealm('footerHeight', 0)
 virtualListStore.computeForRealm('scrollTop', 0)
@@ -23,6 +23,9 @@ virtualListStore.compute('visibleItems',
     ['items', 'scrollTop', 'itemHeights', 'offsetHeight'],
     (items, scrollTop, itemHeights, offsetHeight) => {
   mark('compute visibleItems')
+  if (!items) {
+    return null
+  }
   let renderBuffer = VIEWPORT_RENDER_FACTOR * offsetHeight
   let visibleItems = []
   let totalOffset = 0
@@ -56,6 +59,9 @@ virtualListStore.compute('visibleItems',
 virtualListStore.compute('heightWithoutFooter',
     ['items', 'itemHeights'],
     (items, itemHeights) => {
+  if (!items) {
+    return 0
+  }
   let sum = 0
   let i = -1
   let len = items.length
@@ -77,7 +83,7 @@ virtualListStore.compute('length', ['items'], (items) => items ? items.length :
 virtualListStore.compute('allVisibleItemsHaveHeight',
     ['visibleItems', 'itemHeights'],
     (visibleItems, itemHeights) => {
-  if (!visibleItems.length) {
+  if (!visibleItems) {
     return false
   }
   for (let visibleItem of visibleItems) {

routes/_store/timelineComputations.js

@@ -4,8 +4,8 @@ export function timelineComputations(store) {
       return ((timelines && timelines[currentInstance]) || {})[currentTimeline] || {}
     })
 
-  store.compute('timelineItemIds', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.timelineItemIds || [])
+  store.compute('timelineItemIds', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.timelineItemIds)
   store.compute('runningUpdate', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.runningUpdate)
   store.compute('initialized', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.initialized)
-  store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1])
+  store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1])
 }