perf: fetch lists from database on page load (#1450)

* perf: fetch lists from database on page load

follow-up to #1448, I would like for there not to be a flash on the /community page where the lists suddenly load in, but I would still like to avoid the network request if possible. So when the page first loads, we can load the lists from the database and only fetch them from the network if not in the cache.

* add comment

src/routes/_actions/lists.js

@@ -1,13 +1,13 @@
 import { store } from '../_store/store'
 import { getLists } from '../_api/lists'
-import { cacheFirstUpdateAfter } from '../_utils/sync'
+import { cacheFirstUpdateAfter, cacheFirstUpdateOnlyIfNotInCache } from '../_utils/sync'
 import { database } from '../_database/database'
 
-export async function updateListsForInstance (instanceName) {
+async function syncLists (instanceName, syncMethod) {
   const { loggedInInstances } = store.get()
   const accessToken = loggedInInstances[instanceName].access_token
 
-  await cacheFirstUpdateAfter(
+  await syncMethod(
     () => getLists(instanceName, accessToken),
     () => database.getLists(instanceName),
     lists => database.setLists(instanceName, lists),
@@ -18,3 +18,11 @@ export async function updateListsForInstance (instanceName) {
     }
   )
 }
+
+export async function updateListsForInstance (instanceName) {
+  await syncLists(instanceName, cacheFirstUpdateAfter)
+}
+
+export async function setupListsForInstance (instanceName) {
+  await syncLists(instanceName, cacheFirstUpdateOnlyIfNotInCache)
+}

src/routes/_store/observers/instanceObservers.js

@@ -1,4 +1,5 @@
 import { updateInstanceInfo, updateVerifyCredentialsForInstance } from '../../_actions/instances'
+import { setupListsForInstance } from '../../_actions/lists'
 import { createStream } from '../../_actions/stream/streaming'
 import { updatePushSubscriptionForInstance } from '../../_actions/pushSubscription'
 import { updateCustomEmojiForInstance } from '../../_actions/emoji'
@@ -41,6 +42,7 @@ async function doRefreshInstanceDataAndStream (store, instanceName) {
 async function refreshInstanceData (instanceName) {
   // these are all low-priority
   scheduleIdleTask(() => updateCustomEmojiForInstance(instanceName))
+  scheduleIdleTask(() => setupListsForInstance(instanceName))
   scheduleIdleTask(() => updatePushSubscriptionForInstance(instanceName))
 
   // these are the only critical ones

src/routes/_utils/sync.js

@@ -20,3 +20,21 @@ export async function cacheFirstUpdateAfter (networkFetcher, dbFetcher, dbUpdate
     }
   }
 }
+
+// Try the cache first. If we get a hit, set the state and do nothing. If we don't get a cache hit,
+// then go to the network, update the cache, and set the state.
+export async function cacheFirstUpdateOnlyIfNotInCache (networkFetcher, dbFetcher, dbUpdater, stateSetter) {
+  let dbResponse
+  try {
+    dbResponse = await dbFetcher()
+  } catch (err) {
+    console.error('ignored DB error', err)
+  }
+  if (dbResponse) {
+    stateSetter(dbResponse)
+  } else {
+    const networkResponse = await networkFetcher()
+    /* no await */ dbUpdater(networkResponse)
+    stateSetter(networkResponse)
+  }
+}