diff --git a/frontend/app/bills/[id]/page.tsx b/frontend/app/bills/[id]/page.tsx index c4797bc..23b21ce 100644 --- a/frontend/app/bills/[id]/page.tsx +++ b/frontend/app/bills/[id]/page.tsx @@ -1,9 +1,9 @@ "use client"; -import { use } from "react"; +import { use, useEffect, useRef } from "react"; import Link from "next/link"; import { ArrowLeft, ExternalLink, User } from "lucide-react"; -import { useBill, useBillTrend } from "@/lib/hooks/useBills"; +import { useBill, useBillNews, useBillTrend } from "@/lib/hooks/useBills"; import { BriefPanel } from "@/components/bills/BriefPanel"; import { ActionTimeline } from "@/components/bills/ActionTimeline"; import { TrendChart } from "@/components/bills/TrendChart"; @@ -17,6 +17,23 @@ export default function BillDetailPage({ params }: { params: Promise<{ id: strin const { data: bill, isLoading } = useBill(billId); const { data: trendData } = useBillTrend(billId, 30); + const { data: newsArticles, refetch: refetchNews } = useBillNews(billId); + + // When the bill page is opened with no stored articles, the backend queues + // a Celery news-fetch task that takes a few seconds to complete. + // Retry up to 3 times (every 6 s) so articles appear without a manual refresh. + // newsRetryRef resets on bill navigation so each bill gets its own retry budget. + const newsRetryRef = useRef(0); + useEffect(() => { newsRetryRef.current = 0; }, [billId]); + useEffect(() => { + if (newsArticles === undefined || newsArticles.length > 0) return; + if (newsRetryRef.current >= 3) return; + const timer = setTimeout(() => { + newsRetryRef.current += 1; + refetchNews(); + }, 6000); + return () => clearTimeout(timer); + }, [newsArticles]); // eslint-disable-line react-hooks/exhaustive-deps if (isLoading) { return