Load recommended markets even when navigating from home

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

@@ -154,7 +154,7 @@ export function ContractPageContent(
     user?: User | null
   }
 ) {
-  const { backToHome, comments, user, recommendedContracts } = props
+  const { backToHome, comments, user } = props
 
   const contract = useContractWithPreload(props.contract) ?? props.contract
 
@@ -186,6 +186,17 @@ export function ContractPageContent(
     setShowConfetti(shouldSeeConfetti)
   }, [contract, user])
 
+  const [recommendedContracts, setRecommendedMarkets] = useState(
+    props.recommendedContracts
+  )
+  useEffect(() => {
+    if (recommendedContracts.length === 0) {
+      getRandTopCreatorContracts(contract.creatorId, 4, [contract.id]).then(
+        setRecommendedMarkets
+      )
+    }
+  }, [contract.id, contract.creatorId, recommendedContracts])
+
   const { isResolved, question, outcomeType } = contract
 
   const allowTrade = tradingAllowed(contract)