From 17e6c68cf5f6e7ad80dfd4425fcb9801d8bd756c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 7 Sep 2023 18:01:14 +0800
Subject: [PATCH] Dont display the Edit Saved Searches button during loading

---
 .../templates/homeFeed/LibraryFilterMenu.tsx  | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 8825ff5ad..bf4a8807c 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -10,8 +10,8 @@ import { theme } from '../../tokens/stitches.config'
 import { useRegisterActions } from 'kbar'
 import { LogoBox } from '../../elements/LogoBox'
 import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { useGetSavedSearchQuery} from '../../../lib/networking/queries/useGetSavedSearchQuery'
-import { SavedSearch } from "../../../lib/networking/fragments/savedSearchFragment"
+import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
+import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
 import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
 import Link from 'next/link'
 import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
@@ -86,13 +86,16 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
 }
 
 function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
-  const { savedSearches, isLoading } = useGetSavedSearchQuery();
+  const { savedSearches, isLoading } = useGetSavedSearchQuery()
 
-    const sortedSearches = useMemo(() => {
-        return savedSearches?.filter(it => it.visible)?.sort((left: SavedSearch, right: SavedSearch) =>
-            left.position - right.position
-        )
-    }, [savedSearches])
+  const sortedSearches = useMemo(() => {
+    return savedSearches
+      ?.filter((it) => it.visible)
+      ?.sort(
+        (left: SavedSearch, right: SavedSearch) =>
+          left.position - right.position
+      )
+  }, [savedSearches])
 
   useRegisterActions(
     (sortedSearches ?? []).map((item, idx) => {
@@ -117,23 +120,27 @@ function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
   })
 
   return (
-    <MenuPanel title="Saved Searches"
-               collapsed={collapsed}
-               setCollapsed={setCollapsed}
+    <MenuPanel
+      title="Saved Searches"
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
     >
-      {!collapsed && sortedSearches && sortedSearches?.map((item) => (
-        <FilterButton
-          key={item.name}
-          text={item.name}
-          filterTerm={item.filter}
-          {...props}
+      {!collapsed &&
+        sortedSearches &&
+        sortedSearches?.map((item) => (
+          <FilterButton
+            key={item.name}
+            text={item.name}
+            filterTerm={item.filter}
+            {...props}
+          />
+        ))}
+      {!collapsed && !isLoading && (
+        <EditButton
+          title="Edit Saved Searches"
+          destination="/settings/saved-searches"
         />
-      ))}
-      {!collapsed && (
-      <EditButton
-        title="Edit Saved Searches"
-        destination="/settings/saved-searches"
-      />)}
+      )}
 
       <Box css={{ height: '10px' }}></Box>
     </MenuPanel>