From 430ab4db4c81927a4a601482cd9cc9f88b105852 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 30 Aug 2020 18:08:55 -0700
Subject: [PATCH] fix: empty timelines no longer show infinite loading spinner
 (#1854)

Instead, they now show "Nothing to show." I only fixed this for VirtualList because List should never be non-empty (threads).

Fixes #1763
---
 src/routes/_actions/timeline.js               |  8 +++---
 .../_components/virtualList/VirtualList.html  | 11 ++++++++
 tests/serverActions.js                        |  6 ++++
 tests/spec/039-empty-list.js                  | 28 +++++++++++++++++++
 tests/spec/136-empty-list.js                  | 22 +++++++++++++++
 tests/utils.js                                |  1 +
 6 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 tests/spec/039-empty-list.js
 create mode 100644 tests/spec/136-empty-list.js

diff --git a/src/routes/_actions/timeline.js b/src/routes/_actions/timeline.js
index 3a3909f9..7b409921 100644
--- a/src/routes/_actions/timeline.js
+++ b/src/routes/_actions/timeline.js
@@ -104,9 +104,9 @@ async function addPagedTimelineItems (instanceName, timelineName, items) {
 }
 
 export async function addPagedTimelineItemSummaries (instanceName, timelineName, newSummaries) {
-  const oldSummaries = store.getForTimeline(instanceName, timelineName, 'timelineItemSummaries') || []
+  const oldSummaries = store.getForTimeline(instanceName, timelineName, 'timelineItemSummaries')
 
-  const mergedSummaries = uniqBy(concat(oldSummaries, newSummaries), byId)
+  const mergedSummaries = uniqBy(concat(oldSummaries || [], newSummaries), byId)
 
   if (!isEqual(oldSummaries, mergedSummaries)) {
     store.setForTimeline(instanceName, timelineName, { timelineItemSummaries: mergedSummaries })
@@ -160,10 +160,10 @@ async function addTimelineItems (instanceName, timelineName, items, stale) {
 }
 
 export async function addTimelineItemSummaries (instanceName, timelineName, newSummaries, newStale) {
-  const oldSummaries = store.getForTimeline(instanceName, timelineName, 'timelineItemSummaries') || []
+  const oldSummaries = store.getForTimeline(instanceName, timelineName, 'timelineItemSummaries')
   const oldStale = store.getForTimeline(instanceName, timelineName, 'timelineItemSummariesAreStale')
 
-  const mergedSummaries = uniqBy(mergeArrays(oldSummaries, newSummaries, compareTimelineItemSummaries), byId)
+  const mergedSummaries = uniqBy(mergeArrays(oldSummaries || [], newSummaries, compareTimelineItemSummaries), byId)
 
   if (!isEqual(oldSummaries, mergedSummaries)) {
     store.setForTimeline(instanceName, timelineName, { timelineItemSummaries: mergedSummaries })
diff --git a/src/routes/_components/virtualList/VirtualList.html b/src/routes/_components/virtualList/VirtualList.html
index 7d63f729..7b4b3b54 100644
--- a/src/routes/_components/virtualList/VirtualList.html
+++ b/src/routes/_components/virtualList/VirtualList.html
@@ -12,6 +12,11 @@
                              index={visibleItem.index}
         />
       {/each}
+      {#if !$visibleItems.length}
+        <div class="nothing-to-show">
+          Nothing to show.
+        </div>
+      {/if}
     {/if}
     {#if $showFooter}
       <VirtualListFooter component={footerComponent} />
@@ -23,6 +28,12 @@
     position: relative;
     width: 100%;
   }
+  .nothing-to-show {
+    font-size: 1.1em;
+    width: 100%;
+    padding: 20px 0;
+    text-align: center;
+  }
 </style>
 <script>
   import VirtualListContainer from './VirtualListContainer.html'
diff --git a/tests/serverActions.js b/tests/serverActions.js
index 2d0a0293..ea833ed1 100644
--- a/tests/serverActions.js
+++ b/tests/serverActions.js
@@ -37,6 +37,12 @@ export async function postWithSpoilerAndPrivacyAs (username, text, spoiler, priv
     null, null, true, spoiler, privacy)
 }
 
+export async function postStatusWithMediaAs (username, status, filename, alt, sensitive) {
+  const mediaResponse = await submitMedia(users[username].accessToken, filename, alt)
+  return postStatus(instanceName, users[username].accessToken, status,
+    null, [mediaResponse.id], !!sensitive, null, 'public')
+}
+
 export async function postEmptyStatusWithMediaAs (username, filename, alt, sensitive) {
   const mediaResponse = await submitMedia(users[username].accessToken, filename, alt)
   return postStatus(instanceName, users[username].accessToken, '',
diff --git a/tests/spec/039-empty-list.js b/tests/spec/039-empty-list.js
new file mode 100644
index 00000000..2fcd7c85
--- /dev/null
+++ b/tests/spec/039-empty-list.js
@@ -0,0 +1,28 @@
+import {
+  communityNavButton,
+  getUrl, timeline
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+import { Selector as $ } from 'testcafe'
+
+fixture`039-empty-list.js`
+  .page`http://localhost:4002`
+
+test('Can show an empty list of bookmarks', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click(communityNavButton)
+    .click($('a').withText('Bookmarks'))
+    .expect(getUrl()).contains('bookmarks')
+    .expect(timeline.innerText).contains('Nothing to show.')
+})
+
+test('Can show an empty list of media', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click($('a').withText('quux'))
+    .expect(getUrl()).contains('accounts/3')
+    .click($('a').withText('Media'))
+    .expect(getUrl()).contains('accounts/3/media')
+    .expect(timeline.innerText).contains('Nothing to show.')
+})
diff --git a/tests/spec/136-empty-list.js b/tests/spec/136-empty-list.js
new file mode 100644
index 00000000..306e6c17
--- /dev/null
+++ b/tests/spec/136-empty-list.js
@@ -0,0 +1,22 @@
+import {
+  getNthStatus, sleep,
+  timeline
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+import { postStatusWithMediaAs } from '../serverActions'
+
+fixture`136-empty-list.js`
+  .page`http://localhost:4002`
+
+test('An empty list can become non-empty as results stream in', async t => {
+  await loginAsFoobar(t)
+  await t
+    .expect(getNthStatus(1).exists).ok()
+    .navigateTo('/tags/sweetkitty')
+    .expect(timeline.innerText).contains('Nothing to show.')
+
+  await sleep(500)
+  await postStatusWithMediaAs('quux', 'look at this sweet kitty #sweetkitty', 'kitten2.jpg', 'hello kitty')
+  await t
+    .expect(getNthStatus(1).innerText).contains('look at this sweet kitty', { timeout: 20000 })
+})
diff --git a/tests/utils.js b/tests/utils.js
index d2ab0aa3..8522ef61 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -2,6 +2,7 @@ import { ClientFunction as exec, Selector as $ } from 'testcafe'
 import * as images from './images'
 import * as blobUtils from './blobUtils'
 
+export const timeline = $('[role=feed]')
 export const settingsButton = $('nav a[aria-label=Settings]')
 export const instanceInput = $('#instanceInput')
 export const modalDialog = $('.modal-dialog')