[Naveen230497]

Fix: Eliminate Cumulative Layout Shift (CLS) in AppAlert for first-time visitors

Summary

This pull request addresses an issue where AppAlert initialized with useState(false), causing the alert banner to pop into the DOM asynchronously after the initial paint once useEffect verified cookie state. For first-time visitors (who have no suppression cookie), this caused a noticeable Cumulative Layout Shift (CLS), abruptly shifting landing page content and images downwards.

The component now initializes with showAlert = true so the alert is immediately present during initial render/paint, while maintaining graceful suppression when returning visitors have the snooze cookie.

Related Issue

Fixes #1452

Background and Investigation

Issue #1452 reported that first-time visitors experienced an abrupt layout jump on the landing page when AppAlert loaded.

Root Cause Analysis:

1. AppAlert used const [showAlert, setShowAlert] = useState(false).
2. On initial render, showAlert was false, causing AppAlert to render nothing (null).
3. After the browser painted the initial page, useEffect executed:

   const suppressed = Cookies.get(cookieStorageKey)
   setShowAlert(suppressed == null)

4. For first-time visitors (suppressed == null), setShowAlert(true) was triggered, forcing a second render.
5. The alert element was suddenly inserted above the landing hero, pushing all downstream content downward by ~80px. This negatively impacted Core Web Vitals (CLS) and created a jarring first-time user experience.

Changes Made

1. Initialized Alert State to Visible

• Updated src/components/broadcast/AppAlert.tsx:
  • Changed default state from useState(false) to useState(true).
  • Added clarifying documentation explaining the rationale for CLS prevention during initial paint.

2. Preserved Suppression Behavior for Returning Visitors

• useEffect continues to inspect Cookies.get(cookieStorageKey).
• If a user previously clicked "Don't show this again" (snooze cookie exists), setShowAlert(false) dismisses the banner gracefully upon mount.

3. Added Comprehensive Unit Test Suite

• Updated src/components/broadcast/__tests__/AppAlert.tsx:
  • Added test verifying that first-time visitors (cookieGetter.mockReturnValue(undefined)) have the alert immediately rendered in the document without layout shift.
  • Added test verifying that returning visitors with an active suppression cookie have the alert properly hidden.
  • Retained all existing tests for user interaction and cookie creation.

Why This Approach?

• Zero Layout Shift for New Users: For the primary target audience (first-time visitors without a cookie), the banner is part of the initial render tree, eliminating unexpected reflow.
• Minimal & Non-Breaking: Does not alter the layout hierarchy, Tailwind styling, or SuppressButton contract.
• Prevents Hydration Conflicts: Cleanly aligns client-side expectations with initial component mounting.

Testing and Verification

• Verified unit tests cover initial render visibility for new visitors.
• Verified unit tests cover suppression when cookie is present.
• Verified suppression button continues to set 30-day expiration cookie.
• Zero regressions against existing broadcast test suites.

Scope and Limitations

This PR specifically stabilizes the render lifecycle of AppAlert against layout shift. It does not alter the underlying banner text content or dismiss expiration logic (30 days).

Future Improvements

• Consider an optional CSS fade/collapse transition when returning users have their alert dismissed on mount.
• Support optional per-session dismissal keys if needed for specific flash announcements.

Conclusion

Eliminates layout shift on the landing page for first-time visitors while keeping cookie-based alert suppression completely intact. Thank you to the OpenBeta team for maintaining this platform!