mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-19 20:17:31 +00:00
fix(ui): limit Connection Timeline to 100 events to prevent lag
- add MAX_TIMELINE_EVENTS constant (100) - slice events in useMemo to cap DOM elements - prevents UI freeze with high request counts
This commit is contained in:
@@ -21,6 +21,9 @@ import {
|
|||||||
RotateCcw,
|
RotateCcw,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
// Maximum events to display in the Connection Timeline to prevent performance issues
|
||||||
|
const MAX_TIMELINE_EVENTS = 100;
|
||||||
|
|
||||||
// Earthy, sophisticated color palette for connection lines - works in both light/dark themes
|
// Earthy, sophisticated color palette for connection lines - works in both light/dark themes
|
||||||
const CONNECTION_COLORS = [
|
const CONNECTION_COLORS = [
|
||||||
'#3b3c36', // Charcoal Brown - urban mystery
|
'#3b3c36', // Charcoal Brown - urban mystery
|
||||||
@@ -398,7 +401,11 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
|
|||||||
}, [accounts]);
|
}, [accounts]);
|
||||||
|
|
||||||
// Generate connection events for timeline
|
// Generate connection events for timeline
|
||||||
const connectionEvents = useMemo(() => generateConnectionEvents(accounts), [accounts]);
|
// Limit events to prevent UI lag with high request counts
|
||||||
|
const connectionEvents = useMemo(
|
||||||
|
() => generateConnectionEvents(accounts).slice(0, MAX_TIMELINE_EVENTS),
|
||||||
|
[accounts]
|
||||||
|
);
|
||||||
|
|
||||||
// Calculate SVG paths for bezier curves
|
// Calculate SVG paths for bezier curves
|
||||||
const calculatePaths = useCallback(() => {
|
const calculatePaths = useCallback(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user