From 22c174f15820c4f9fa11e8ac278b59fdab786ad3 Mon Sep 17 00:00:00 2001
From: Lee Hansel Solevilla <sshanzel@yahoo.com>
Date: Tue, 21 Jan 2025 17:51:44 +0800
Subject: [PATCH 1/2] fix: hydration issues

---
 .../src/components/BookmarkFeedLayout.tsx       | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/shared/src/components/BookmarkFeedLayout.tsx b/packages/shared/src/components/BookmarkFeedLayout.tsx
index 1e3126a58a..7f2658d5fc 100644
--- a/packages/shared/src/components/BookmarkFeedLayout.tsx
+++ b/packages/shared/src/components/BookmarkFeedLayout.tsx
@@ -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,
@@ -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);
@@ -130,6 +130,14 @@ export default function BookmarkFeedLayout({
     };
   }, [searchQuery, feedQueryKey, listId, isReminderOnly, isFolderPage]);
 
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  if (!isHydrated) {
+    return null;
+  }
+
   return (
     <FeedPageLayoutComponent>
       {children}
@@ -139,10 +147,7 @@ export default function BookmarkFeedLayout({
         </Typography>
       </FeedPageHeader>
       <CustomFeedHeader
-        className={classNames(
-          'mb-6',
-          shouldUseListFeedLayout && !shouldUseListMode && 'px-4',
-        )}
+        className={shouldUseListFeedLayout && !shouldUseListMode && 'px-4'}
       >
         {searchChildren}
         {!isFolderPage && (

From 8994774bef4e221d77f6b981eb82396158ab265d Mon Sep 17 00:00:00 2001
From: Lee Hansel Solevilla <sshanzel@yahoo.com>
Date: Tue, 21 Jan 2025 18:14:47 +0800
Subject: [PATCH 2/2] refactor: usage of use view size client

---
 packages/shared/src/components/BookmarkFeedLayout.tsx | 11 +----------
 packages/shared/src/hooks/useFeedLayout.ts            |  4 ++--
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/components/BookmarkFeedLayout.tsx b/packages/shared/src/components/BookmarkFeedLayout.tsx
index 7f2658d5fc..c8cf02dabf 100644
--- a/packages/shared/src/components/BookmarkFeedLayout.tsx
+++ b/packages/shared/src/components/BookmarkFeedLayout.tsx
@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import dynamic from 'next/dynamic';
 import {
   BOOKMARKS_FEED_QUERY,
@@ -72,7 +72,6 @@ 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);
@@ -130,14 +129,6 @@ export default function BookmarkFeedLayout({
     };
   }, [searchQuery, feedQueryKey, listId, isReminderOnly, isFolderPage]);
 
-  useEffect(() => {
-    setIsHydrated(true);
-  }, []);
-
-  if (!isHydrated) {
-    return null;
-  }
-
   return (
     <FeedPageLayoutComponent>
       {children}
diff --git a/packages/shared/src/hooks/useFeedLayout.ts b/packages/shared/src/hooks/useFeedLayout.ts
index 2900d64060..e97fab7d59 100644
--- a/packages/shared/src/hooks/useFeedLayout.ts
+++ b/packages/shared/src/hooks/useFeedLayout.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useViewSize, ViewSize } from './useViewSize';
+import { useViewSizeClient, ViewSize } from './useViewSize';
 import { useActiveFeedNameContext } from '../contexts/ActiveFeedNameContext';
 import {
   CommentFeedPage,
@@ -109,7 +109,7 @@ const getFeedPageLayoutComponent = ({
 export const useFeedLayout = ({
   feedRelated = true,
 }: UseFeedLayoutProps = {}): UseFeedLayoutReturn => {
-  const isLaptopSize = useViewSize(ViewSize.Laptop);
+  const isLaptopSize = useViewSizeClient(ViewSize.Laptop);
   const isLaptop = isNullOrUndefined(isLaptopSize) || isLaptopSize;
   const { feedName } = useActiveFeedNameContext();
   const { insaneMode } = useContext(SettingsContext);