From df17496c69f78bddc401910e93f0276ea4d40053 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 24 Jun 2022 09:15:31 -0700
Subject: [PATCH 1/4] Use persisted state instead of preferences data for
 library layout

These visual settings should be per device not set in preferences
having them in preferences requires an API call and will make
them flicker when loaded.
---
 .../web/components/templates/homeFeed/HomeFeedContainer.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 5e02fb680..e2c7f75ba 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -502,9 +502,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
 
   const { preferencesData, isValidating: isValidatingPreferences } =
     useGetUserPreferences()
-  const [layout, setLayout] = useState<LayoutType>(
-    (preferencesData?.libraryLayoutType as LayoutType) || 'GRID_LAYOUT'
-  )
+  const [layout, setLayout] = usePersistedState({ key: 'libraryLayout', initialValue: 'GRID_LAYOUT' })
   const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
     useState(false)
   const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()

From a6455d8359bda1f3165772c3261818a10d81611c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 24 Jun 2022 09:38:32 -0700
Subject: [PATCH 2/4] We dont need to wait for preferences data to load before
 showing the grid selector now

---
 .../templates/homeFeed/HomeFeedContainer.tsx  | 41 ++++++++-----------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index e2c7f75ba..bc5727c7b 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -499,10 +499,7 @@ type HomeFeedContentProps = {
 
 function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
-
-  const { preferencesData, isValidating: isValidatingPreferences } =
-    useGetUserPreferences()
-  const [layout, setLayout] = usePersistedState({ key: 'libraryLayout', initialValue: 'GRID_LAYOUT' })
+  const [layout, setLayout] = usePersistedState<LayoutType>({ key: 'libraryLayout', initialValue: 'GRID_LAYOUT' })
   const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
     useState(false)
   const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()
@@ -578,26 +575,22 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
               justifyContent: 'center',
             }}
           >
-            {!isValidatingPreferences && (
-              <>
-                <StyledToggleButton
-                  data-state={layout === 'GRID_LAYOUT' ? 'on' : 'off'}
-                  onClick={() => {
-                    updateLayout('GRID_LAYOUT')
-                  }}
-                >
-                  <GridLayoutIcon color={'rgb(211, 211, 213)'} />
-                </StyledToggleButton>
-                <StyledToggleButton
-                  data-state={layout === 'LIST_LAYOUT' ? 'on' : 'off'}
-                  onClick={() => {
-                    updateLayout('LIST_LAYOUT')
-                  }}
-                >
-                  <ListLayoutIcon color={'rgb(211, 211, 213)'} />
-                </StyledToggleButton>
-              </>
-            )}
+            <StyledToggleButton
+              data-state={layout === 'GRID_LAYOUT' ? 'on' : 'off'}
+              onClick={() => {
+                updateLayout('GRID_LAYOUT')
+              }}
+            >
+              <GridLayoutIcon color={'rgb(211, 211, 213)'} />
+            </StyledToggleButton>
+            <StyledToggleButton
+              data-state={layout === 'LIST_LAYOUT' ? 'on' : 'off'}
+              onClick={() => {
+                updateLayout('LIST_LAYOUT')
+              }}
+            >
+              <ListLayoutIcon color={'rgb(211, 211, 213)'} />
+            </StyledToggleButton>
           </Box>
           <Button
             style="ctaDarkYellow"

From 004a6a25aba57ddd6f9da5b2392e276399b3f745 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 24 Jun 2022 09:48:46 -0700
Subject: [PATCH 3/4] We still need to call useGetUserPreferences to get the
 users theme

---
 .../web/components/templates/homeFeed/HomeFeedContainer.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index bc5727c7b..dcf45f8fc 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -22,8 +22,6 @@ import {
 } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { ShareArticleModal } from '../article/ShareArticleModal'
-import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
-import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { webBaseURL } from '../../../lib/appConfig'
 import { Toaster } from 'react-hot-toast'
 import { SnoozeLinkModal } from '../article/SnoozeLinkModal'
@@ -44,6 +42,7 @@ import {
   PageType,
 } from '../../../lib/networking/fragments/articleFragment'
 import { EditTitleModal } from './EditTitleModal'
+import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -62,6 +61,8 @@ const SAVED_SEARCHES: Record<string, string> = {
 }
 
 export function HomeFeedContainer(): JSX.Element {
+  useGetUserPreferences()
+
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
   const defaultQuery = {

From d2522420b1c5a57c7ce0726b7cc102ea644800a7 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 24 Jun 2022 09:48:58 -0700
Subject: [PATCH 4/4] We dont need to sync layout

---
 packages/web/components/templates/homeFeed/HomeFeedContainer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index dcf45f8fc..25f9121ec 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -510,7 +510,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     async (newLayout: LayoutType) => {
       if (layout === newLayout) return
       setLayout(newLayout)
-      userPersonalizationMutation({ libraryLayoutType: newLayout })
     },
     [layout, setLayout]
   )