Prevent layout shifts when navigating from links in PSI and other setup notifications on the dashboard
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 12h
- Merged PRs (30d)
- 80
Description
## Feature Description
Following on from the work in https://github.com/google/site-kit-wp/issues/4641, ensure that the lazy-loaded dashboard sections are not loaded while scrolling past them after clicking on the links in the PSI and Idea Hub setup notifications.
This will involve a bit of refactoring of the solution to #4641 in order to make it applicable to the PSI/Idea Hub links in `SetupSuccessBannerNotification`.
https://github.com/google/site-kit-wp/blob/f584517e6810170f17f47c6ac3477ae676c653cb/assets/js/components/notifications/SetupSuccessBannerNotification.js#L181-L195
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
* If a user clicks a link that scrolls them to different content on the page (via an ID/`#hash` link), they haven't moved away from that content by manually scrolling the page, and a layout shift in the content should not shift the page and move them away from the content.
## Implementation Brief
See: https://github.com/google/site-kit-wp/issues/4880#issuecomment-1813040905 for a link to a proof-of-concept branch with a fix.
*
### Test Coverage
*
## QA Brief
*
## Changelog entry
*
Contributor guide
Research direction
Start with assets/js/components/notifications/SetupSuccessBannerNotification.js at the linked PSI and Idea Hub links, then review issue #4641 and the proof-of-concept branch linked in the issue comment. Confirm that navigation to hash-linked content remains stable while lazy-loaded sections change, and verify the acceptance criterion for both notification links.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100