Bug Description
I noticed that AppAlert initializes with useState(false) which causes a layout shift for first-time visitors. Since useEffect runs after the first render, the alert pops in after the page has already painted, pushing content down.
Current Behaviour
- Page renders with alert hidden
useEffect runs and checks for a cookie- If no cookie is found, alert appears and pushes content down
Expected Behaviour
Alert renders visible from the start for users with no cookie, so there is no content shift on initial load.
Notes
The alert sits right above the content and images on the landing page. First-time visitors naturally start looking at the page as it loads and then the alert suddenly pops in and pushes everything down not a great first impression.
Before Layout Shit
After Layout Shift
Bug Description
I noticed that
AppAlertinitializes withuseState(false)which causes a layout shift for first-time visitors. SinceuseEffectruns after the first render, the alert pops in after the page has already painted, pushing content down.Current Behaviour
useEffectruns and checks for a cookieExpected Behaviour
Alert renders visible from the start for users with no cookie, so there is no content shift on initial load.
Notes
The alert sits right above the content and images on the landing page. First-time visitors naturally start looking at the page as it loads and then the alert suddenly pops in and pushes everything down not a great first impression.
Before Layout Shit
After Layout Shift