Prasad P. Pawar created ATLAS-5395:
--------------------------------------
Summary: Atlas UI: Lazy-load widgets, optimize sidebar tree
rendering, fix layout shift animations
Key: ATLAS-5395
URL: https://issues.apache.org/jira/browse/ATLAS-5395
Project: Atlas
Issue Type: Sub-task
Components: atlas-webui
Affects Versions: 3.0.0
Reporter: Prasad P. Pawar
Assignee: Prasad P. Pawar
After API deferrals, improve perceived performance and main-thread
responsiveness.
Issues:
- Below-fold widgets (RecentActivity, charts, KafkaTopicSummaryCard) load
eagerly with main dashboard
- d3/Recharts chunks (~210 KB) in initial critical path
- 1315 DOM nodes in sidebar; tree rebuild causes re-render storms
- 8 non-composited animations: MuiCollapse-root animating height property in
sidebar trees (causes layout thrashing, contributes to CLS 0.071)
- 15 layout shifts in classification tree expand/collapse
Fixes:
1. React.lazy + IntersectionObserver for below-fold dashboard cards
2. Load Recharts/d3 only when chart enters viewport
3. Defer DashboardOverview mount until after search bar paints
4. useMemo for tree data transformation; React.memo on tree row components
5. react-window virtualization for trees with 100+ nodes
6. Replace MuiCollapse height animation with transform/opacity OR use CSS
transition on max-height with will-change: transform to avoid non-composited
animations
7. DashboardSkeleton during API wait; no layout shift when data loads
Acceptance Criteria:
* d3/Recharts not in initial critical path on search route
* Charts render when scrolled into viewport
* Lighthouse {{non-composited-animations}} = 0 (or ≤ 2 acceptable)
* Expand/collapse does not re-render entire tree
* CLS ≤ 0.1 after tree interactions
* QuickSearch usable before full typedef load completes
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
