Add back dynamically loading feed

web/components/contract-feed.tsx

@@ -47,8 +47,10 @@ export function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
   return (
     <SiteLink className="relative" href={`/${username}`}>
       <img
-        className="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center"
+        className="rounded-full bg-gray-400 flex items-center justify-center"
         src={avatarUrl}
+        width={40}
+        height={40}
         alt=""
       />
     </SiteLink>

web/pages/home.tsx

@@ -20,6 +20,8 @@ import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
 import { useUser } from '../hooks/use-user'
 import { ClosingSoonMarkets, HotMarkets } from './markets'
+import { useContracts } from '../hooks/use-contracts'
+import { useRecentComments } from '../hooks/use-comments'
 
 export async function getStaticProps() {
   const [contracts, recentComments, hotContracts, closingSoonContracts] =
@@ -61,7 +63,6 @@ const Home = (props: {
   closingSoonContracts: Contract[]
 }) => {
   const {
-    activeContracts,
     activeContractBets,
     activeContractComments,
     hotContracts,
@@ -70,6 +71,12 @@ const Home = (props: {
 
   const user = useUser()
 
+  const contracts = useContracts() ?? props.activeContracts
+  const recentComments = useRecentComments()
+  const activeContracts = recentComments
+    ? findActiveContracts(contracts, recentComments)
+    : props.activeContracts
+
   if (user === null) {
     Router.replace('/')
     return <></>