Cache first step of generating feed: folds you follow and contracts you bet on.

web/hooks/use-fold.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Fold } from '../../common/fold'
 import { User } from '../../common/user'
 import {
+  getFollowedFolds,
   listenForFold,
   listenForFolds,
   listenForFollow,
@@ -36,3 +37,26 @@ export const useFollowingFold = (fold: Fold, user: User | null | undefined) => {
 
   return following
 }
+
+export const useFollowedFolds = (user: User | null | undefined) => {
+  const [followedFoldIds, setFollowedFoldIds] = useState<string[] | undefined>(
+    undefined
+  )
+
+  useEffect(() => {
+    if (user) {
+      const key = `followed-folds-${user.id}`
+      const followedFoldJson = localStorage.getItem(key)
+      if (followedFoldJson) {
+        setFollowedFoldIds(JSON.parse(followedFoldJson))
+      }
+
+      getFollowedFolds(user.id).then((foldIds) => {
+        setFollowedFoldIds(foldIds)
+        localStorage.setItem(key, JSON.stringify(foldIds))
+      })
+    }
+  }, [user])
+
+  return followedFoldIds
+}

web/hooks/use-user-bets.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import { Bet, listenForUserBets } from '../lib/firebase/bets'
 
@@ -10,3 +11,26 @@ export const useUserBets = (userId: string | undefined) => {
 
   return bets
 }
+
+export const useUserBetContracts = (userId: string | undefined) => {
+  const [contractIds, setContractIds] = useState<string[] | undefined>()
+
+  useEffect(() => {
+    if (userId) {
+      const key = `user-bet-contractIds-${userId}`
+
+      const userBetContractJson = localStorage.getItem(key)
+      if (userBetContractJson) {
+        setContractIds(JSON.parse(userBetContractJson))
+      }
+
+      return listenForUserBets(userId, (bets) => {
+        const contractIds = _.uniq(bets.map((bet) => bet.contractId))
+        setContractIds(contractIds)
+        localStorage.setItem(key, JSON.stringify(contractIds))
+      })
+    }
+  }, [userId])
+
+  return contractIds
+}

web/pages/home.tsx

@@ -12,15 +12,16 @@ import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
 import { useUser } from '../hooks/use-user'
 import { useContracts } from '../hooks/use-contracts'
-import { getFollowedFolds, listAllFolds } from '../lib/firebase/folds'
+import { listAllFolds } from '../lib/firebase/folds'
 import { Fold } from '../../common/fold'
 import { filterDefined } from '../../common/util/array'
-import { useUserBets } from '../hooks/use-user-bets'
+import { useUserBetContracts } from '../hooks/use-user-bets'
 import { LoadingIndicator } from '../components/loading-indicator'
 import { FoldTagList } from '../components/tags-list'
 import { SearchIcon } from '@heroicons/react/outline'
 import { Row } from '../components/layout/row'
 import { SparklesIcon } from '@heroicons/react/solid'
+import { useFollowedFolds } from '../hooks/use-fold'
 
 export async function getStaticProps() {
   const [contracts, folds] = await Promise.all([
@@ -45,16 +46,7 @@ const Home = (props: { contracts: Contract[]; folds: Fold[] }) => {
 
   const contracts = useContracts() ?? props.contracts
 
-  const [followedFoldIds, setFollowedFoldIds] = useState<string[] | undefined>(
+  const followedFoldIds = useFollowedFolds(user)
-    undefined
-  )
-
-  useEffect(() => {
-    if (user) {
-      getFollowedFolds(user.id).then((foldIds) => setFollowedFoldIds(foldIds))
-    }
-  }, [user])
-
   const followedFolds = filterDefined(
     (followedFoldIds ?? []).map((id) => folds.find((fold) => fold.id === id))
   )
@@ -62,13 +54,13 @@ const Home = (props: { contracts: Contract[]; folds: Fold[] }) => {
     _.flatten(followedFolds.map((fold) => fold.lowercaseTags))
   )
 
-  const yourBets = useUserBets(user?.id)
+  const yourBetContractIds = useUserBetContracts(user?.id)
-  const yourBetContracts = new Set(
+  const yourBetContracts = yourBetContractIds
-    (yourBets ?? []).map((bet) => bet.contractId)
+    ? new Set(yourBetContractIds)
-  )
+    : undefined
 
   const feedContracts =
-    followedFoldIds && yourBets
+    followedFoldIds && yourBetContracts
       ? contracts.filter(
           (contract) =>
             contract.lowercaseTags.some((tag) => tagSet.has(tag)) ||
@@ -86,6 +78,7 @@ const Home = (props: { contracts: Contract[]; folds: Fold[] }) => {
       Promise.all(
         feedContracts.map((contract) => listAllBets(contract.id))
       ).then(setFeedBets)
+
       Promise.all(
         feedContracts.map((contract) => listAllComments(contract.id))
       ).then(setFeedComments)