Add deferred props

bknoles · bknoles · commit e7341886bc42 · 2025-11-19T09:15:19.000-08:00
diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb
@@ -9,7 +9,11 @@ def index
         messages: { include: :user }
       ])
 
-    render inertia: { topics: }
+    render inertia: {
+      topics: topics,
+      trending_topics: calculate_trending_topics(topics)
+      # trending_topics: InertiaRails.defer { calculate_trending_topics(topics) }
+    }
   end
 
   def show
@@ -23,4 +27,11 @@ def show
       ])
     render inertia: { topic: }
   end
+
+  protected
+
+  def calculate_trending_topics(topics)
+    sleep 2 # this is a very manual process!
+    topics.sample(3).pluck("id")
+  end
 end
diff --git a/app/frontend/components/TopicsTable.tsx b/app/frontend/components/TopicsTable.tsx
@@ -1,8 +1,9 @@
 import { Link } from '@inertiajs/react'
 import { Topic } from '../types'
 import Avatar from './Avatar'
+import TrendingIcon from './TrendingIcon';
 
-function TopicRow({ topic }: { topic: Topic }) {
+function TopicRow({ topic, isTrending }: { topic: Topic, isTrending?: boolean }) {
   const {
     id,
     title,
@@ -23,6 +24,7 @@ function TopicRow({ topic }: { topic: Topic }) {
       <td className="px-6 py-4">
         <Link href={`/topics/${id}`} className="text-sm font-medium text-sky-700">
           {title}
+          {isTrending && <TrendingIcon className="mx-1" />}
         </Link>
         <br />
         <span className="text-sm text-gray-500 mt-1">{categoryName}</span>
@@ -44,7 +46,7 @@ function TopicRow({ topic }: { topic: Topic }) {
   )
 }
 
-export default function TopicsTable({ topics }: { topics: Topic[] }) {
+export default function TopicsTable({ topics, trendingTopics = [] }: { topics: Topic[], trendingTopics?: number[] }) {
   return (
     <table className="min-w-full divide-y divide-gray-200">
       <thead className="bg-gray-50">
@@ -65,7 +67,7 @@ export default function TopicsTable({ topics }: { topics: Topic[] }) {
       </thead>
       <tbody className="bg-white divide-y divide-gray-200">
         {topics.map((topic: Topic) => (
-          <TopicRow key={topic.id} topic={topic} />
+          <TopicRow key={topic.id} topic={topic} isTrending={trendingTopics.includes(topic.id)} />
         ))}
         {topics.length === 0 && (
           <tr>
diff --git a/app/frontend/pages/topics/index.tsx b/app/frontend/pages/topics/index.tsx
@@ -3,14 +3,14 @@ import AppLayout from '../../layouts/AppLayout'
 import { Topic } from '../../types'
 import TopicsTable from '../../components/TopicsTable'
 
-function TopicsIndex({ topics }: { topics: Topic[] }) {
+function TopicsIndex({ topics, trending_topics }: { topics: Topic[], trending_topics: number[] }) {
   return (
     <AppLayout>
       <Head title="Topics - Pups & Pourovers" />
 
       <div className="max-w-7xl mx-auto">
         <div className="bg-white shadow-sm rounded-lg overflow-hidden">
-          <TopicsTable topics={topics} />
+          <TopicsTable topics={topics} trendingTopics={trending_topics} />
         </div>
       </div>
     </AppLayout>
