Don't load all comments in contract page static props anymore

web/components/contract/contract-leaderboard.tsx

@@ -1,10 +1,10 @@
 import { Bet } from 'common/bet'
-import { ContractComment } from 'common/comment'
 import { resolvedPayout } from 'common/calculate'
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { groupBy, mapValues, sumBy, sortBy, keyBy } from 'lodash'
 import { useState, useMemo, useEffect } from 'react'
+import { useComments } from 'web/hooks/use-comments'
 import { listUsers, User } from 'web/lib/firebase/users'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedComment } from '../feed/feed-comments'
@@ -61,12 +61,10 @@ export function ContractLeaderboard(props: {
   ) : null
 }
 
-export function ContractTopTrades(props: {
+export function ContractTopTrades(props: { contract: Contract; bets: Bet[] }) {
-  contract: Contract
+  const { contract, bets } = props
-  bets: Bet[]
+  // todo: this stuff should be calced in DB at resolve time
-  comments: ContractComment[]
+  const comments = useComments(contract.id)
-}) {
-  const { contract, bets, comments } = props
   const commentsById = keyBy(comments, 'id')
   const betsById = keyBy(bets, 'id')
 

web/components/contract/contract-tabs.tsx

@@ -8,12 +8,12 @@ import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
 import { groupBy, sortBy } from 'lodash'
 import { Bet } from 'common/bet'
 import { Contract } from 'common/contract'
-import { ContractComment } from 'common/comment'
 import { PAST_BETS, User } from 'common/user'
 import { ContractBetsTable, BetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 import { useComments } from 'web/hooks/use-comments'
 import { useLiquidity } from 'web/hooks/use-liquidity'
 import { useTipTxns } from 'web/hooks/use-tip-txns'
@@ -28,9 +28,8 @@ export function ContractTabs(props: {
   contract: Contract
   user: User | null | undefined
   bets: Bet[]
-  comments: ContractComment[]
 }) {
-  const { contract, user, bets, comments } = props
+  const { contract, user, bets } = props
 
   const isMobile = useIsMobile()
 
@@ -57,9 +56,7 @@ export function ContractTabs(props: {
       tabs={[
         {
           title: 'Comments',
-          content: (
+          content: <CommentsTabContent contract={contract} />,
-            <CommentsTabContent contract={contract} comments={comments} />
-          ),
         },
         {
           title: capitalize(PAST_BETS),
@@ -80,13 +77,15 @@ export function ContractTabs(props: {
 
 const CommentsTabContent = memo(function CommentsTabContent(props: {
   contract: Contract
-  comments: ContractComment[]
 }) {
-  const { contract, comments } = props
+  const { contract } = props
   const tips = useTipTxns({ contractId: contract.id })
-  const updatedComments = useComments(contract.id) ?? comments
+  const comments = useComments(contract.id)
+  if (comments == null) {
+    return <LoadingIndicator />
+  }
   if (contract.outcomeType === 'FREE_RESPONSE') {
-    const generalComments = updatedComments.filter(
+    const generalComments = comments.filter(
       (c) => c.answerOutcome === undefined && c.betId === undefined
     )
     const sortedAnswers = sortBy(

web/pages/[username]/[contractSlug].tsx

@@ -17,7 +17,6 @@ import {
 import { SEO } from 'web/components/SEO'
 import { Page } from 'web/components/page'
 import { Bet, listAllBets } from 'web/lib/firebase/bets'
-import { listAllComments } from 'web/lib/firebase/comments'
 import Custom404 from '../404'
 import { AnswersPanel } from 'web/components/answers/answers-panel'
 import { fromPropz, usePropz } from 'web/hooks/use-propz'
@@ -33,7 +32,6 @@ import { AlertBox } from 'web/components/alert-box'
 import { useTracking } from 'web/hooks/use-tracking'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { User } from 'common/user'
-import { ContractComment } from 'common/comment'
 import { getOpenGraphProps } from 'common/contract-details'
 import { ContractDescription } from 'web/components/contract/contract-description'
 import {
@@ -57,20 +55,11 @@ export async function getStaticPropz(props: {
   const { contractSlug } = props.params
   const contract = (await getContractFromSlug(contractSlug)) || null
   const contractId = contract?.id
-
+  const bets = contractId ? await listAllBets(contractId) : []
-  const [bets, comments] = await Promise.all([
-    contractId ? listAllBets(contractId) : [],
-    contractId ? listAllComments(contractId) : [],
-  ])
 
   return {
-    props: {
+    // Limit the data sent to the client. Client will still load all bets directly.
-      contract,
+    props: { contract, bets: bets.slice(0, 5000) },
-      // Limit the data sent to the client. Client will still load all bets and comments directly.
-      bets: bets.slice(0, 5000),
-      comments: comments.slice(0, 1000),
-    },
-
     revalidate: 5, // regenerate after five seconds
   }
 }
@@ -82,12 +71,10 @@ export async function getStaticPaths() {
 export default function ContractPage(props: {
   contract: Contract | null
   bets: Bet[]
-  comments: ContractComment[]
   backToHome?: () => void
 }) {
   props = usePropz(props, getStaticPropz) ?? {
     contract: null,
-    comments: [],
     bets: [],
   }
 
@@ -170,7 +157,7 @@ export function ContractPageContent(
     user?: User | null
   }
 ) {
-  const { backToHome, comments, user } = props
+  const { backToHome, user } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   usePrefetch(user?.id)
   useTracking(
@@ -265,22 +252,13 @@ export function ContractPageContent(
           <>
             <div className="grid grid-cols-1 sm:grid-cols-2">
               <ContractLeaderboard contract={contract} bets={bets} />
-              <ContractTopTrades
+              <ContractTopTrades contract={contract} bets={bets} />
-                contract={contract}
-                bets={bets}
-                comments={comments}
-              />
             </div>
             <Spacer h={12} />
           </>
         )}
 
-        <ContractTabs
+        <ContractTabs contract={contract} user={user} bets={bets} />
-          contract={contract}
-          user={user}
-          bets={bets}
-          comments={comments}
-        />
         {!user ? (
           <Col className="mt-4 max-w-sm items-center xl:hidden">
             <BetSignUpPrompt />