Conditionally load unreads (#4072)

bluesky-social · May 17, 2024 · 829f6a9 · 829f6a9
1 parent 0444e69
commit 829f6a9
Showing 1 changed file with 37 additions and 25 deletions.
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
@@ -66,6 +66,8 @@ import {
 } from '#/components/icons/UserCircle'
 import {router} from '../../../routes'
 
+const NAV_ICON_WIDTH = 28
+
 function ProfileCard() {
   const {currentAccount} = useSession()
   const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
@@ -280,15 +282,29 @@ function ComposeBtn() {
   )
 }
 
+function ChatNavItem() {
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const numUnreadMessages = useUnreadMessageCount()
+
+  return (
+    <NavItem
+      href="/messages"
+      count={numUnreadMessages.numUnread}
+      icon={<Message style={pal.text} width={NAV_ICON_WIDTH} />}
+      iconFilled={<MessageFilled style={pal.text} width={NAV_ICON_WIDTH} />}
+      label={_(msg`Chat`)}
+    />
+  )
+}
+
 export function DesktopLeftNav() {
   const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isDesktop, isTablet} = useWebMediaQueries()
   const numUnreadNotifications = useUnreadNotifications()
-  const numUnreadMessages = useUnreadMessageCount()
   const gate = useGate()
-  const iconWidth = 28
 
   if (!hasSession && !isDesktop) {
     return null
@@ -316,66 +332,62 @@ export function DesktopLeftNav() {
 
           <NavItem
             href="/"
-            icon={<Home width={iconWidth} style={pal.text} />}
-            iconFilled={<HomeFilled width={iconWidth} style={pal.text} />}
+            icon={<Home width={NAV_ICON_WIDTH} style={pal.text} />}
+            iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />}
             label={_(msg`Home`)}
           />
           <NavItem
             href="/search"
-            icon={<MagnifyingGlass style={pal.text} width={iconWidth} />}
+            icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
             iconFilled={
-              <MagnifyingGlassFilled style={pal.text} width={iconWidth} />
+              <MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} />
             }
             label={_(msg`Search`)}
           />
           <NavItem
             href="/notifications"
             count={numUnreadNotifications}
-            icon={<Bell width={iconWidth} style={pal.text} />}
-            iconFilled={<BellFilled width={iconWidth} style={pal.text} />}
+            icon={<Bell width={NAV_ICON_WIDTH} style={pal.text} />}
+            iconFilled={<BellFilled width={NAV_ICON_WIDTH} style={pal.text} />}
             label={_(msg`Notifications`)}
           />
-          {gate('dms') && (
-            <NavItem
-              href="/messages"
-              count={numUnreadMessages.numUnread}
-              icon={<Message style={pal.text} width={iconWidth} />}
-              iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
-              label={_(msg`Chat`)}
-            />
-          )}
+          {gate('dms') && <ChatNavItem />}
           <NavItem
             href="/feeds"
             icon={
               <Hashtag
                 style={pal.text as FontAwesomeIconStyle}
-                width={iconWidth}
+                width={NAV_ICON_WIDTH}
               />
             }
             iconFilled={
               <HashtagFilled
                 style={pal.text as FontAwesomeIconStyle}
-                width={iconWidth}
+                width={NAV_ICON_WIDTH}
               />
             }
             label={_(msg`Feeds`)}
           />
           <NavItem
             href="/lists"
-            icon={<List style={pal.text} width={iconWidth} />}
-            iconFilled={<ListFilled style={pal.text} width={iconWidth} />}
+            icon={<List style={pal.text} width={NAV_ICON_WIDTH} />}
+            iconFilled={<ListFilled style={pal.text} width={NAV_ICON_WIDTH} />}
             label={_(msg`Lists`)}
           />
           <NavItem
             href={currentAccount ? makeProfileLink(currentAccount) : '/'}
-            icon={<UserCircle width={iconWidth} style={pal.text} />}
-            iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />}
+            icon={<UserCircle width={NAV_ICON_WIDTH} style={pal.text} />}
+            iconFilled={
+              <UserCircleFilled width={NAV_ICON_WIDTH} style={pal.text} />
+            }
             label={_(msg`Profile`)}
           />
           <NavItem
             href="/settings"
-            icon={<Settings width={iconWidth} style={pal.text} />}
-            iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />}
+            icon={<Settings width={NAV_ICON_WIDTH} style={pal.text} />}
+            iconFilled={
+              <SettingsFilled width={NAV_ICON_WIDTH} style={pal.text} />
+            }
             label={_(msg`Settings`)}
           />