fix(activity): avoid Clerk hydration mismatch during initial render
This commit is contained in:
@@ -133,6 +133,15 @@ const FeedCard = memo(function FeedCard({
|
|||||||
FeedCard.displayName = "FeedCard";
|
FeedCard.displayName = "FeedCard";
|
||||||
|
|
||||||
export default function ActivityPage() {
|
export default function ActivityPage() {
|
||||||
|
// Clerk auth state can differ between the server render and client hydration.
|
||||||
|
// When that happens, <SignedIn>/<SignedOut> can cause a React hydration mismatch
|
||||||
|
// that fails Cypress (and is noisy in the console). Gate the initial render until
|
||||||
|
// after mount so the first client render matches the server markup.
|
||||||
|
const [isMounted, setIsMounted] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
setIsMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const { isSignedIn } = useAuth();
|
const { isSignedIn } = useAuth();
|
||||||
const isPageActive = usePageActive();
|
const isPageActive = usePageActive();
|
||||||
|
|
||||||
@@ -294,6 +303,8 @@ export default function ActivityPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardShell>
|
<DashboardShell>
|
||||||
|
{isMounted ? (
|
||||||
|
<>
|
||||||
<SignedOut>
|
<SignedOut>
|
||||||
<SignedOutPanel
|
<SignedOutPanel
|
||||||
message="Sign in to view the feed."
|
message="Sign in to view the feed."
|
||||||
@@ -334,6 +345,8 @@ export default function ActivityPage() {
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</SignedIn>
|
</SignedIn>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
</DashboardShell>
|
</DashboardShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user