upgrade navigation and route prefetch responsiveness
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Suspense } from 'react';
|
||||
@@ -12,10 +13,13 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
|
||||
import { useTaskPoller } from '@/hooks/use-task-poller';
|
||||
import { getTask, listFilings, queueFilingAnalysis, queueFilingSync } from '@/lib/api';
|
||||
import { queueFilingAnalysis, queueFilingSync } from '@/lib/api';
|
||||
import type { Filing, Task } from '@/lib/types';
|
||||
import { formatCurrencyByScale, type NumberScaleUnit } from '@/lib/format';
|
||||
import { queryKeys } from '@/lib/query/keys';
|
||||
import { filingsQueryOptions, taskQueryOptions } from '@/lib/query/options';
|
||||
|
||||
const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
|
||||
{ value: 'thousands', label: 'Thousands (K)' },
|
||||
@@ -102,6 +106,8 @@ function FilingExternalLink({ href, label }: FilingExternalLinkProps) {
|
||||
function FilingsPageContent() {
|
||||
const { isPending, isAuthenticated } = useAuthGuard();
|
||||
const searchParams = useSearchParams();
|
||||
const queryClient = useQueryClient();
|
||||
const { prefetchReport } = useLinkPrefetch();
|
||||
|
||||
const [filings, setFilings] = useState<Filing[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -123,18 +129,23 @@ function FilingsPageContent() {
|
||||
}, [searchParams]);
|
||||
|
||||
const loadFilings = useCallback(async (ticker?: string) => {
|
||||
setLoading(true);
|
||||
const options = filingsQueryOptions({ ticker, limit: 120 });
|
||||
|
||||
if (!queryClient.getQueryData(options.queryKey)) {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await listFilings({ ticker, limit: 120 });
|
||||
const response = await queryClient.ensureQueryData(options);
|
||||
setFilings(response.filings);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unable to fetch filings');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [queryClient]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && isAuthenticated) {
|
||||
@@ -146,6 +157,8 @@ function FilingsPageContent() {
|
||||
taskId: activeTask?.id ?? null,
|
||||
onTerminalState: async () => {
|
||||
setActiveTask(null);
|
||||
void queryClient.invalidateQueries({ queryKey: ['filings'] });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
await loadFilings(searchTicker || undefined);
|
||||
}
|
||||
});
|
||||
@@ -159,8 +172,10 @@ function FilingsPageContent() {
|
||||
|
||||
try {
|
||||
const { task } = await queueFilingSync({ ticker: syncTickerInput.trim().toUpperCase(), limit: 20 });
|
||||
const latest = await getTask(task.id);
|
||||
const latest = await queryClient.fetchQuery(taskQueryOptions(task.id));
|
||||
setActiveTask(latest.task);
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: ['filings'] });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue filing sync');
|
||||
}
|
||||
@@ -169,8 +184,10 @@ function FilingsPageContent() {
|
||||
const triggerAnalysis = async (accessionNumber: string) => {
|
||||
try {
|
||||
const { task } = await queueFilingAnalysis(accessionNumber);
|
||||
const latest = await getTask(task.id);
|
||||
const latest = await queryClient.fetchQuery(taskQueryOptions(task.id));
|
||||
setActiveTask(latest.task);
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: ['report'] });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue filing analysis');
|
||||
}
|
||||
@@ -196,10 +213,18 @@ function FilingsPageContent() {
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
title="Filings Stream"
|
||||
title="Filings"
|
||||
subtitle="Sync SEC submissions, keep 10-K/10-Q financial snapshots, and analyze qualitative signals from other forms."
|
||||
activeTicker={searchTicker || null}
|
||||
actions={(
|
||||
<Button variant="secondary" className="w-full sm:w-auto" onClick={() => void loadFilings(searchTicker || undefined)}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => {
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.filings(searchTicker || null, 120) });
|
||||
void loadFilings(searchTicker || undefined);
|
||||
}}
|
||||
>
|
||||
<TimerReset className="size-4" />
|
||||
Refresh table
|
||||
</Button>
|
||||
@@ -351,6 +376,8 @@ function FilingsPageContent() {
|
||||
{hasAnalysis ? (
|
||||
<Link
|
||||
href={`/analysis/reports/${filing.ticker}/${encodeURIComponent(filing.accession_number)}`}
|
||||
onMouseEnter={() => prefetchReport(filing.ticker, filing.accession_number)}
|
||||
onFocus={() => prefetchReport(filing.ticker, filing.accession_number)}
|
||||
className="inline-flex items-center rounded-md border border-[color:var(--line-weak)] px-2 py-1 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
|
||||
>
|
||||
Open summary
|
||||
@@ -419,6 +446,8 @@ function FilingsPageContent() {
|
||||
{hasAnalysis ? (
|
||||
<Link
|
||||
href={`/analysis/reports/${filing.ticker}/${encodeURIComponent(filing.accession_number)}`}
|
||||
onMouseEnter={() => prefetchReport(filing.ticker, filing.accession_number)}
|
||||
onFocus={() => prefetchReport(filing.ticker, filing.accession_number)}
|
||||
className="inline-flex items-center rounded-md border border-[color:var(--line-weak)] px-2 py-1 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
|
||||
>
|
||||
Summary
|
||||
|
||||
Reference in New Issue
Block a user