Tweaks for loading daily movers

web/components/contract/prob-change-table.tsx

@@ -2,34 +2,35 @@ import clsx from 'clsx'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { CPMMContract } from 'common/contract'
 import { formatPercent } from 'common/util/format'
-import { useProbChanges } from 'web/hooks/use-prob-changes'
 import { SiteLink } from '../site-link'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
+import { LoadingIndicator } from '../loading-indicator'
 
-export function ProbChangeTable(props: { userId: string | null | undefined }) {
-  const { userId } = props
+export function ProbChangeTable(props: {
+  changes:
+    | { positiveChanges: CPMMContract[]; negativeChanges: CPMMContract[] }
+    | undefined
+}) {
+  const { changes } = props
 
-  const changes = useProbChanges(userId ?? '')
-
-  if (!changes) {
-    return null
-  }
-
-  const count = 6
+  if (!changes) return <LoadingIndicator />
 
   const { positiveChanges, negativeChanges } = changes
-  const filteredPositiveChanges = positiveChanges.slice(0, count / 2)
-  const filteredNegativeChanges = negativeChanges.slice(0, count / 2)
-  const filteredChanges = [
-    ...filteredPositiveChanges,
-    ...filteredNegativeChanges,
-  ]
+  if (positiveChanges.length === 0 && negativeChanges.length === 0) return null
+
+  const rows = Math.min(
+    Math.min(positiveChanges.length, negativeChanges.length),
+    3
+  )
+
+  const filteredPositiveChanges = positiveChanges.slice(0, rows)
+  const filteredNegativeChanges = negativeChanges.slice(0, rows)
 
   return (
     <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
       <Col className="flex-1 divide-y">
-        {filteredChanges.slice(0, count / 2).map((contract) => (
+        {filteredPositiveChanges.map((contract) => (
           <Row className="items-center hover:bg-gray-100">
             <ProbChange
               className="p-4 text-right text-xl"
@@ -45,7 +46,7 @@ export function ProbChangeTable(props: { userId: string | null | undefined }) {
         ))}
       </Col>
       <Col className="flex-1 divide-y">
-        {filteredChanges.slice(count / 2).map((contract) => (
+        {filteredNegativeChanges.map((contract) => (
           <Row className="items-center hover:bg-gray-100">
             <ProbChange
               className="p-4 text-right text-xl"

web/pages/experimental/home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Router from 'next/router'
 import {
   PencilIcon,
@@ -28,6 +28,7 @@ import { groupPath } from 'web/lib/firebase/groups'
 import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
 import { calculatePortfolioProfit } from 'common/calculate-metrics'
 import { formatMoney } from 'common/util/format'
+import { useProbChanges } from 'web/hooks/use-prob-changes'
 
 const Home = () => {
   const user = useUser()
@@ -38,8 +39,7 @@ const Home = () => {
 
   const groups = useMemberGroups(user?.id) ?? []
 
-  const [homeSections] = useState(user?.homeSections ?? [])
-  const { sections } = getHomeItems(groups, homeSections)
+  const { sections } = getHomeItems(groups, user?.homeSections ?? [])
 
   return (
     <Page>
@@ -152,6 +152,8 @@ function GroupSection(props: { group: Group; user: User | null | undefined }) {
 
 function DailyMoversSection(props: { userId: string | null | undefined }) {
   const { userId } = props
+  const changes = useProbChanges(userId ?? '')
+
   return (
     <Col className="gap-2">
       <SiteLink className="text-xl" href={'/daily-movers'}>
@@ -161,7 +163,7 @@ function DailyMoversSection(props: { userId: string | null | undefined }) {
           aria-hidden="true"
         />
       </SiteLink>
-      <ProbChangeTable userId={userId} />
+      <ProbChangeTable changes={changes} />
     </Col>
   )
 }