Type
Performance
Severity
Medium
Location
frontend/src/app/pages/dashboard.tsx (around lines 220 and 314)
Description
The dashboard receives live scan progress updates through Server-Sent Events (SSE) during repository and organization scans. The onmessage callbacks update top-level state using setSingleScanState and setOrgStatusData approximately every 1.5 seconds.
Since these state hooks are managed within the root Dashboard component, each incoming event triggers a re-render of the entire dashboard, including components unrelated to scan progress.
As the number of UI elements on the dashboard grows, these frequent full-page re-renders can negatively impact rendering performance and responsiveness.
User Impact
- Reduced UI responsiveness during long-running scans.
- Noticeable frame drops or animation stuttering on lower-end devices.
- Unnecessary rendering of components unrelated to scan progress.
- Increased CPU usage and reduced rendering efficiency.
Steps to Reproduce
- Open the dashboard.
- Start a repository or organization scan.
- Allow the scan to run while live progress updates are received via SSE.
- Monitor component re-renders using React DevTools Profiler or browser performance tools.
- Observe that the entire
Dashboard component re-renders on each SSE update instead of only the progress-related UI.
Expected Behavior
Only the components responsible for displaying scan progress (such as progress indicators and scanning dialogs) should re-render when new SSE events are received.
Current Behavior
- Each SSE
onmessage event updates top-level dashboard state.
- The root
Dashboard component re-renders for every progress update.
- Components unrelated to scanning are unnecessarily re-rendered.
Recommended Fix
Refactor the scan progress logic to minimize unnecessary rendering.
Possible improvements include:
- Extract scanning dialogs and progress indicators into isolated child components.
- Move SSE state management closer to the components that consume it.
- Wrap progress-related components with
React.memo where appropriate.
- Use stable callbacks (
useCallback) and memoized values (useMemo) to prevent unnecessary child updates.
- Keep unrelated dashboard state independent of scan progress updates.
Acceptance Criteria
Definition of Done
Type
Performance
Severity
Medium
Location
frontend/src/app/pages/dashboard.tsx(around lines 220 and 314)Description
The dashboard receives live scan progress updates through Server-Sent Events (SSE) during repository and organization scans. The
onmessagecallbacks update top-level state usingsetSingleScanStateandsetOrgStatusDataapproximately every 1.5 seconds.Since these state hooks are managed within the root
Dashboardcomponent, each incoming event triggers a re-render of the entire dashboard, including components unrelated to scan progress.As the number of UI elements on the dashboard grows, these frequent full-page re-renders can negatively impact rendering performance and responsiveness.
User Impact
Steps to Reproduce
Dashboardcomponent re-renders on each SSE update instead of only the progress-related UI.Expected Behavior
Only the components responsible for displaying scan progress (such as progress indicators and scanning dialogs) should re-render when new SSE events are received.
Current Behavior
onmessageevent updates top-level dashboard state.Dashboardcomponent re-renders for every progress update.Recommended Fix
Refactor the scan progress logic to minimize unnecessary rendering.
Possible improvements include:
React.memowhere appropriate.useCallback) and memoized values (useMemo) to prevent unnecessary child updates.Acceptance Criteria
Definition of Done