google / google/site-kit-wp

Prevent layout shifts when navigating from links in PSI and other setup notifications on the dashboard

Open
#4,880 10 comments 0 reactions 0 assignees View on GitHub
P1 Type: Enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.