From c7cec464aae0cdc2f8ec67dba294bc6060c8753a Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Mon, 26 May 2025 20:53:11 +0200
Subject: [PATCH] improve performance by avoiding some big re-renders (#1087)

---
 commafeed-client/src/App.tsx                     | 15 ++++++++-------
 commafeed-client/src/hooks/useAppLoading.ts      | 16 ++++++++--------
 .../src/pages/app/FeedEntriesPage.tsx            |  5 +++--
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx
index 994b1ba9..f432917d 100644
--- a/commafeed-client/src/App.tsx
+++ b/commafeed-client/src/App.tsx
@@ -143,11 +143,15 @@ function GoogleAnalyticsHandler() {
     return null
 }
 
-function UnreadCountTitleHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) {
+function UnreadCountTitleHandler({ enabled }: { enabled?: boolean }) {
+    const root = useAppSelector(state => state.tree.rootCategory)
+    const unreadCount = categoryUnreadCount(root)
     return <title>{enabled && unreadCount > 0 ? `(${unreadCount}) CommaFeed` : "CommaFeed"}</title>
 }
 
-function UnreadCountFaviconHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) {
+function UnreadCountFaviconHandler({ enabled }: { enabled?: boolean }) {
+    const root = useAppSelector(state => state.tree.rootCategory)
+    const unreadCount = categoryUnreadCount(root)
     useEffect(() => {
         if (enabled && unreadCount > 0) {
             Tinycon.setBubble(unreadCount)
@@ -205,13 +209,10 @@ function CustomCssHandler() {
 
 export function App() {
     useI18n()
-    const root = useAppSelector(state => state.tree.rootCategory)
     const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
     const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
     const dispatch = useAppDispatch()
 
-    const unreadCount = categoryUnreadCount(root)
-
     useEffect(() => {
         dispatch(reloadServerInfos())
     }, [dispatch])
@@ -219,8 +220,8 @@ export function App() {
     return (
         <Providers>
             <>
-                <UnreadCountTitleHandler unreadCount={unreadCount} enabled={unreadCountTitle} />
-                <UnreadCountFaviconHandler unreadCount={unreadCount} enabled={unreadCountFavicon} />
+                <UnreadCountTitleHandler enabled={unreadCountTitle} />
+                <UnreadCountFaviconHandler enabled={unreadCountFavicon} />
                 <BrowserExtensionBadgeUnreadCountHandler />
                 <CustomJsHandler />
                 <CustomCssHandler />
diff --git a/commafeed-client/src/hooks/useAppLoading.ts b/commafeed-client/src/hooks/useAppLoading.ts
index 19cbf1b4..be6cbc9a 100644
--- a/commafeed-client/src/hooks/useAppLoading.ts
+++ b/commafeed-client/src/hooks/useAppLoading.ts
@@ -8,28 +8,28 @@ interface Step {
 }
 
 export const useAppLoading = () => {
-    const profile = useAppSelector(state => state.user.profile)
-    const settings = useAppSelector(state => state.user.settings)
-    const rootCategory = useAppSelector(state => state.tree.rootCategory)
-    const tags = useAppSelector(state => state.user.tags)
+    const profileLoaded = useAppSelector(state => !!state.user.profile)
+    const settingsLoaded = useAppSelector(state => !!state.user.settings)
+    const rootCategoryLoaded = useAppSelector(state => !!state.tree.rootCategory)
+    const tagsLoaded = useAppSelector(state => !!state.user.tags)
     const { _ } = useLingui()
 
     const steps: Step[] = [
         {
             label: _(msg`Loading settings...`),
-            done: !!settings,
+            done: settingsLoaded,
         },
         {
             label: _(msg`Loading profile...`),
-            done: !!profile,
+            done: profileLoaded,
         },
         {
             label: _(msg`Loading subscriptions...`),
-            done: !!rootCategory,
+            done: rootCategoryLoaded,
         },
         {
             label: _(msg`Loading tags...`),
-            done: !!tags,
+            done: tagsLoaded,
         },
     ]
 
diff --git a/commafeed-client/src/pages/app/FeedEntriesPage.tsx b/commafeed-client/src/pages/app/FeedEntriesPage.tsx
index 9444f2ca..410a0f9a 100644
--- a/commafeed-client/src/pages/app/FeedEntriesPage.tsx
+++ b/commafeed-client/src/pages/app/FeedEntriesPage.tsx
@@ -42,7 +42,9 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
     const { id = Constants.categories.all.id } = useParams()
     const viewport = useViewportSize()
     const theme = useMantineTheme()
-    const rootCategory = useAppSelector(state => state.tree.rootCategory)
+    const noSubscriptions = useAppSelector(
+        state => state.tree.rootCategory && flattenCategoryTree(state.tree.rootCategory).every(c => c.feeds.length === 0)
+    )
     const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
     const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl)
     const hasMore = useAppSelector(state => state.entries.hasMore)
@@ -83,7 +85,6 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
         return () => promise.abort()
     }, [dispatch, props.sourceType, id, location.state?.timestamp])
 
-    const noSubscriptions = rootCategory && flattenCategoryTree(rootCategory).every(c => c.feeds.length === 0)
     if (noSubscriptions) return <NoSubscriptionHelp />
     return (
         // add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding