Background
Currently the ReadingList/Collections icon is loaded with JavaScript late on page load. Identify ways to have icon loaded in styles module, not in JS module in order to not have a white gap in the user links and negatively impact discoverability.
Goal
Icon should be loaded alongside other user link icons
Acceptance criteria
- User is able to view and click the ReadingList/Collections icon while page is loading and other icons are already available.
Requirement
Scope: Desktop web (Vector 2022).
- The ReadingList/Collections icon must be moved from the JavaScript loading module to the styles (CSS) module to improve load timing.
- The icon must appear alongside other user link icons immediately during initial page render.
- The icon must be visible and clickable while the page is still loading, without any white gap or late reflow in the user links area.
- Functionality (click to open ReadingLists/Saved items) must remain unchanged.
BDD
Feature: Load ReadingList/Collections icon with initial styles
Scenario: Page loading with ReadingList icon visible
Given I am using Vector 2022 on desktop
When the page begins loading
Then the ReadingList/Collections icon appears alongside other user link icons
And it is clickable even before the JavaScript module finishes loading
And no white gap or layout shift occurs in the user links sectionTest Steps
Test Case 1: Verify early load of ReadingList/Collections icon
- Log in and ensure ReadingLists feature is enabled.
- Open any article page using Vector 2022.
- Observe the user links area during initial page load.
- AC1: The ReadingList/Collections icon appears immediately with other icons (before full JS load).
- AC2: The icon is clickable and opens the ReadingLists view.
- AC3: No white gap or placeholder appears in the user links area.
- AC4: No layout shift occurs when the page finishes loading.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T409116#11343036 |
| 2 | ✅ | T409116#11343036 |
| 3 | ✅ | T409116#11343036 |
| 4 | ✅ | T409116#11343036 |
