Conditionally load unreads (#4072)

(cherry picked from commit 829f6a9e64)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.83.0",
+  "version": "1.82.0",
   "private": true,
   "engines": {
     "node": ">=18"

src/screens/Profile/Header/Shell.tsx

@@ -84,9 +84,10 @@ let ProfileHeaderShell = ({
       <View
         style={[a.px_lg, a.pb_sm]}
         pointerEvents={isIOS ? 'auto' : 'box-none'}>
-        <ProfileHeaderAlerts moderation={moderation} />
-        {isMe && (
+        {isMe ? (
           <LabelsOnMe details={{did: profile.did}} labels={profile.labels} />
+        ) : (
+          <ProfileHeaderAlerts moderation={moderation} />
         )}
       </View>
 

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`)}
           />