perf: optimize Activity Log — lazy diff, 30-day default, getById

- List query: exclude changes JSONB from select (only metadata)
- Default to last 30 days when no date filter (avoids full table scan)
- New getById query: fetches full changes JSONB on demand
- ExpandedDiff component: fetches diff only when user expands an entry
- 5-minute staleTime on expanded diffs (cacheable, rarely changes)

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-03-22 22:55:45 +01:00
parent 7a7430851c
commit eacbdb5d47
2 changed files with 54 additions and 8 deletions
@@ -122,6 +122,28 @@ function DiffView({ changes }: { changes: Changes }) {
);
}
function ExpandedDiff({ entryId }: { entryId: string }) {
const { data, isLoading } = trpc.auditLog.getById.useQuery(
{ id: entryId },
{ staleTime: 300_000 },
);
if (isLoading) {
return (
<div className="border-t border-gray-100 px-4 py-3 dark:border-slate-700">
<div className="h-4 w-48 shimmer-skeleton rounded" />
</div>
);
}
const changes = parseChanges((data as any)?.changes);
return (
<div className="border-t border-gray-100 px-4 py-3 dark:border-slate-700">
<DiffView changes={changes} />
</div>
);
}
function SummaryCards({ summary }: { summary: { byEntityType: Record<string, number>; total: number } }) {
const sorted = useMemo(() => {
return Object.entries(summary.byEntityType)
@@ -355,7 +377,6 @@ export function ActivityLogClient() {
)}
{allEntries.map((entry) => {
const changes = parseChanges(entry.changes);
const isExpanded = expandedId === entry.id;
const entityLink = ENTITY_LINKS[entry.entityType]?.(entry.entityId);
@@ -431,12 +452,8 @@ export function ActivityLogClient() {
</svg>
</button>
{/* Expanded Diff */}
{isExpanded && (
<div className="border-t border-gray-100 px-4 py-3 dark:border-slate-700">
<DiffView changes={changes} />
</div>
)}
{/* Expanded Diff — fetched on demand */}
{isExpanded && <ExpandedDiff entryId={entry.id} />}
</div>
);
})}