lower timeline fetch batch size from 20 to 10 (#523)

routes/_actions/timeline.js

@@ -8,8 +8,9 @@ import isEqual from 'lodash-es/isEqual'
 import { database } from '../_database/database'
 import { getStatus, getStatusContext } from '../_api/statuses'
 import { emit } from '../_utils/eventBus'
+import { TIMELINE_BATCH_SIZE } from '../_static/timelines'
 
-const FETCH_LIMIT = 20
+const SCROLL_TO_BOTTOM_DELAY = 2000
 
 async function storeFreshTimelineItemsInDatabase (instanceName, timelineName, items) {
   await database.insertTimelineItems(instanceName, timelineName, items)
@@ -31,7 +32,7 @@ async function fetchTimelineItemsFromNetwork (instanceName, accessToken, timelin
     let [ status, context ] = await Promise.all([statusRequest, contextRequest])
     return concat(context.ancestors, status, context.descendants)
   } else { // normal timeline
-    return getTimeline(instanceName, accessToken, timelineName, lastTimelineItemId, FETCH_LIMIT)
+    return getTimeline(instanceName, accessToken, timelineName, lastTimelineItemId, null, TIMELINE_BATCH_SIZE)
   }
 }
 
@@ -40,7 +41,7 @@ async function fetchTimelineItems (instanceName, accessToken, timelineName, last
   let items
   let stale = false
   if (!online) {
-    items = await database.getTimeline(instanceName, timelineName, lastTimelineItemId, FETCH_LIMIT)
+    items = await database.getTimeline(instanceName, timelineName, lastTimelineItemId, TIMELINE_BATCH_SIZE)
     stale = true
   } else {
     try {
@@ -49,7 +50,7 @@ async function fetchTimelineItems (instanceName, accessToken, timelineName, last
     } catch (e) {
       console.error(e)
       toast.say('Internet request failed. Showing offline content.')
-      items = await database.getTimeline(instanceName, timelineName, lastTimelineItemId, FETCH_LIMIT)
+      items = await database.getTimeline(instanceName, timelineName, lastTimelineItemId, TIMELINE_BATCH_SIZE)
       stale = true
     }
   }
@@ -116,7 +117,9 @@ export async function setupTimeline () {
 export async function fetchTimelineItemsOnScrollToBottom (instanceName, timelineName) {
   store.setForTimeline(instanceName, timelineName, { runningUpdate: true })
   await fetchTimelineItemsAndPossiblyFallBack()
+  setTimeout(() => {
     store.setForTimeline(instanceName, timelineName, { runningUpdate: false })
+  }, SCROLL_TO_BOTTOM_DELAY) // delay to avoid spamming network calls on scroll to bottom
 }
 
 export async function showMoreItemsForTimeline (instanceName, timelineName) {

routes/_api/timelines.js

@@ -22,7 +22,7 @@ function getTimelineUrlPath (timeline) {
   }
 }
 
-export function getTimeline (instanceName, accessToken, timeline, maxId, since) {
+export function getTimeline (instanceName, accessToken, timeline, maxId, since, limit) {
   let timelineUrlName = getTimelineUrlPath(timeline)
   let url = `${basename(instanceName)}/api/v1/${timelineUrlName}`
 
@@ -43,6 +43,10 @@ export function getTimeline (instanceName, accessToken, timeline, maxId, since)
     params.max_id = maxId
   }
 
+  if (limit) {
+    params.limit = limit
+  }
+
   if (timeline === 'local') {
     params.local = true
   }

routes/_database/timelines/pagination.js

@@ -13,6 +13,7 @@ import {
 } from '../keys'
 import { fetchStatus } from './fetchStatus'
 import { fetchNotification } from './fetchNotification'
+import { TIMELINE_BATCH_SIZE } from '../../_static/timelines'
 
 export async function getNotificationTimeline (instanceName, timeline, maxId, limit) {
   let storeNames = [NOTIFICATION_TIMELINES_STORE, NOTIFICATIONS_STORE, STATUSES_STORE, ACCOUNTS_STORE]
@@ -82,7 +83,7 @@ export async function getStatusThread (instanceName, statusId) {
 
 export async function getTimeline (instanceName, timeline, maxId, limit) {
   maxId = maxId || null
-  limit = limit || 20
+  limit = limit || TIMELINE_BATCH_SIZE
   if (timeline === 'notifications') {
     return getNotificationTimeline(instanceName, timeline, maxId, limit)
   } else if (timeline.startsWith('status/')) {

routes/_static/timelines.js

@@ -1,7 +1,7 @@
-const timelines = {
+export const TIMELINE_BATCH_SIZE = 10
+
+export const timelines = {
   home: { name: 'home', label: 'Home' },
   local: { name: 'local', label: 'Local' },
   federated: { name: 'federated', label: 'Federated' }
 }
-
-export { timelines }

routes/_store/observers/instanceObservers.js

@@ -4,6 +4,7 @@ import { createStream } from '../../_actions/streaming'
 import { updateCustomEmojiForInstance } from '../../_actions/emoji'
 import { addStatusesOrNotifications } from '../../_actions/addStatusOrNotification'
 import { getTimeline } from '../../_api/timelines'
+import { TIMELINE_BATCH_SIZE } from '../../_static/timelines'
 
 export function instanceObservers (store) {
   // stream to watch for home timeline updates and notifications
@@ -63,7 +64,7 @@ export function instanceObservers (store) {
           return
         }
         let newTimelineItems = await getTimeline(currentInstance, accessToken,
-          timelineName, null, firstTimelineItemId)
+          timelineName, null, firstTimelineItemId, TIMELINE_BATCH_SIZE)
         if (newTimelineItems.length) {
           addStatusesOrNotifications(currentInstance, timelineName, newTimelineItems)
         }

routes/_store/observers/timelineObservers.js

@@ -2,6 +2,7 @@ import { updateInstanceInfo } from '../../_actions/instances'
 import { createStream } from '../../_actions/streaming'
 import { getTimeline } from '../../_api/timelines'
 import { addStatusesOrNotifications } from '../../_actions/addStatusOrNotification'
+import { TIMELINE_BATCH_SIZE } from '../../_static/timelines'
 
 export function timelineObservers (store) {
   // stream to watch for local/federated/etc. updates. home and notification
@@ -67,7 +68,7 @@ export function timelineObservers (store) {
       // fill in the "streaming gap" – i.e. fetch the most recent 20 items so that there isn't
       // a big gap in the timeline if you haven't looked at it in awhile
       let newTimelineItems = await getTimeline(currentInstance, accessToken,
-        currentTimeline, null, firstTimelineItemId)
+        currentTimeline, null, firstTimelineItemId, TIMELINE_BATCH_SIZE)
       if (newTimelineItems.length) {
         addStatusesOrNotifications(currentInstance, currentTimeline, newTimelineItems)
       }