Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: hydration issues #4090

Merged
merged 4 commits into from
Jan 21, 2025
Merged

fix: hydration issues #4090

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
22c174f
fix: hydration issues
sshanzel Jan 21, 2025
92a3f6d
Merge branch 'main' into MI-765
sshanzel Jan 21, 2025
8994774
refactor: usage of use view size client
sshanzel Jan 21, 2025
8296c30
Merge branch 'main' into MI-765
sshanzel Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions packages/shared/src/components/BookmarkFeedLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useContext, useMemo, useState } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import dynamic from 'next/dynamic';
import classNames from 'classnames';
import {
BOOKMARKS_FEED_QUERY,
SEARCH_BOOKMARKS_QUERY,
Expand Down Expand Up @@ -73,6 +72,7 @@ export default function BookmarkFeedLayout({
FeedPageLayoutComponent,
shouldUseListMode,
} = useFeedLayout();
const [isHydrated, setIsHydrated] = useState(false);
const { showPlusSubscription } = usePlusSubscription();
const { user, tokenRefreshed } = useContext(AuthContext);
const [showSharedBookmarks, setShowSharedBookmarks] = useState(false);
Expand Down Expand Up @@ -130,6 +130,14 @@ export default function BookmarkFeedLayout({
};
}, [searchQuery, feedQueryKey, listId, isReminderOnly, isFolderPage]);

useEffect(() => {
setIsHydrated(true);
}, []);

if (!isHydrated) {
return null;
}
Copy link
Contributor

@capJavert capJavert Jan 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it is coming from useViewSize inside useFeedLayout, you can try using useViewSizeClient, it is the same hook only difference is that on the server it will always return false, it will do the same on the first render so there should be no hydration issue.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Let me look into that.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it worked as intended.

Copy link
Contributor

@capJavert capJavert Jan 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since useFeedLayout is used in different pages, maybe just check it does not introduce some layout shifts on those pages, but it should be ok if this worked.


return (
<FeedPageLayoutComponent>
{children}
Expand All @@ -139,10 +147,7 @@ export default function BookmarkFeedLayout({
</Typography>
</FeedPageHeader>
<CustomFeedHeader
className={classNames(
'mb-6',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component CustomFeedHeader already has the mb-6. No need for us to add it again.

shouldUseListFeedLayout && !shouldUseListMode && 'px-4',
)}
className={shouldUseListFeedLayout && !shouldUseListMode && 'px-4'}
>
{searchChildren}
{!isFolderPage && (
Expand Down
Loading