Fix Announcement Dismissal on First Render #2055
Conversation
…ation check - Added hydration guard to avoid flicker during SSR - Safely parse localStorage value with try-catch - Applied CSS variable correctly using inline styles - Ensured announcement hides immediately if previously dismissed
| React.useEffect(() => { | ||
| setHydrated(true) | ||
| }, []) | ||
|
|
There was a problem hiding this comment.
we already have a useIsClient hook for this
There was a problem hiding this comment.
You're right I’ve used useIsClient to handle the hydration check and ensure the component doesn’t render fix 08f9df2
And only the hydration check is required to fix this issue
Replaces hydration state logic with the useIsClient hook for client-side checks. Simplifies the component by removing unnecessary state and effect, and streamlines localStorage access.
|
Before your changes: The announcement is displayed by default. If a user has previously dismissed it, the announcement is hidden, causing the table to shift slightly upward. After your changes: The announcement is hidden by default. However, for new users or when opening in incognito mode, the announcement appears at the top, pushing the table and filters slightly downward. The issue persists but affects a different group of users. To fix this, we should use cookies to keep track of whether someone’s dismissed the announcement. Since our frontend’s statically generated, we can inject a script to the |
That makes sense the layout shift is caused by the delayed rendering of the announcement after hydration. Using cookies and reading them before the page loads ( script in the |
2 participants
Changes Made
useSyncExternalStoreto safely access localStorage only after hydration.JSON.parsein try-catch to prevent runtime errors.