improve performance by avoiding some big re-renders (#1087)

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 />

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,
         },
     ]
 

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