You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@atlas.apache.org by "Prasad P. Pawar (Jira)" <ji...@apache.org> on 2026/09/01 15:43:00 UTC

[jira] [Created] (ATLAS-5393) Atlas UI: Preload LCP logo, set dimensions, and add static app shell

Prasad P. Pawar created ATLAS-5393:
--------------------------------------

             Summary: Atlas UI: Preload LCP logo, set dimensions, and add static app shell
                 Key: ATLAS-5393
                 URL: https://issues.apache.org/jira/browse/ATLAS-5393
             Project: Atlas
          Issue Type: Sub-task
          Components: atlas-webui
            Reporter: Prasad P. Pawar
            Assignee: Prasad P. Pawar
             Fix For: 3.0.0


LCP is 7.5s. The LCP element is img.header-logo (atlas_logo.svg), rendered only after React hydrates (~10s). Resource load delay is ~9.8s because the logo is not discoverable from initial HTML.

Issues:
- unsized-images: atlas_logo.svg missing width/height (CLS risk — current CLS 0.071)
- Logo not preloaded in index.html
- ~5s blank screen before any content paints

Fixes:
1. Add <link rel="preload" as="image" href="/n3/assets/atlas_logo.svg"> in index.html
2. Set explicit width and height on img.header-logo in SideBarBody.tsx
3. Add minimal static HTML/CSS shell in index.html (sidebar chrome placeholder + logo) so content is visible before JS executes
4. Show sidebar skeleton in Layout.tsx while Redux session/headers load



Acceptance Criteria:
 * Logo appears in Network tab as preload before React bundle completes
 * Lighthouse LCP element has explicit width/height
 * Lighthouse {{unsized-images}} = 0
 * Non-blank content visible before JS bundle fully executes
 * LCP improves to < 5.5s (intermediate target before heavier perf work)
 * CLS remains ≤ 0.1
 * No visual regression in header layout



--
This message was sent by Atlassian Jira
(v8.20.10#820010)