Speed up reputation/notifications header dropdowns (#9400)

* Speed up reputation/notifications header dropdowns

Fixes N+1 queries on track/exercise, stops the header dropdowns from
eagerly refetching their full list on every page load (badge counts
are inlined server-side instead, list is fetched lazily on first
open), and fixes a staleTime unit bug (30ms instead of 30s) that made
the reputation dropdown refetch far more aggressively than intended.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ekpu7NEZTWCghctyM7XjTW

* Fix CI: badge props/websocket live-updates broke by lazy dropdown loading

- internal.tsx passed data.defaultUnreadCount but the raw JSON prop key
  is snake_case (default_unread_count), like the other dropdowns already
  do — the badge was rendering blank.
- The websocket-triggered background refresh (used to keep the badge
  live while the dropdown is closed, even before it's ever been opened)
  was accidentally gated behind hasOpenedOnce in both dropdowns. Restored
  the original "refetch while closed" condition; refetch() works fine
  even while the query is enabled:false pre-first-open.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ekpu7NEZTWCghctyM7XjTW

* Fix flaky notifications dropdown system test

The list now fetches lazily on first open instead of eagerly on
mount, so the initial (empty) fetch can race a notification created
immediately after opening. Wait for that fetch to resolve before
creating the notification, rather than relying on timing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ekpu7NEZTWCghctyM7XjTW

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

Author: iHiD

app/assemblers/assemble_notifications_list.rb

@@ -39,7 +39,7 @@ def header_notifications
 
     ids = ids.to_a # Sets don't have `.index`
 
-    notifications = User::Notification.where(id: ids).
+    notifications = User::Notification.where(id: ids).includes(:track, :exercise).
       sort_by { |n| ids.index(n.id) }[0, 5]
 
     Kaminari.paginate_array(notifications, total_count: notifications.size).page(1).per(5)

app/assemblers/assemble_reputation_tokens.rb

@@ -49,7 +49,7 @@ def header_tokens
 
     ids = ids.to_a # Sets don't have `.index`
 
-    tokens = User::ReputationToken.where(id: ids).
+    tokens = User::ReputationToken.where(id: ids).includes(:track, :exercise).
       sort_by { |rt| ids.index(rt.id) }[0, 5]
 
     Kaminari.paginate_array(tokens, total_count: tokens.size).page(1).per(5)

app/commands/user/notification/retrieve.rb

@@ -32,7 +32,7 @@ def call
   end
 
   def setup!
-    @notifications = user.notifications.visible
+    @notifications = user.notifications.visible.includes(:track, :exercise)
   end
 
   def sort!

app/commands/user/reputation_token/search.rb

@@ -21,7 +21,7 @@ def initialize(user, criteria: nil, category: nil, page: nil, per: nil, order: n
   end
 
   def call
-    @tokens = user.reputation_tokens
+    @tokens = user.reputation_tokens.includes(:track, :exercise)
 
     filter_criteria!
     filter_category!

app/helpers/react_components/dropdowns/notifications.rb

@@ -1,10 +1,15 @@
 module ReactComponents
   module Dropdowns
     class Notifications < ReactComponent
+      initialize_with :user
+
       def to_s
         super(
           "dropdowns-notifications",
-          { endpoint: Exercism::Routes.api_notifications_url(for_header: true) },
+          {
+            default_unread_count: user.notifications.unread.count,
+            endpoint: Exercism::Routes.api_notifications_url(for_header: true)
+          },
           persistent: true
         )
       end

app/helpers/view_components/site_header.rb

@@ -127,7 +127,7 @@ def signed_in_section
             [
               new_testimonial_icon,
               new_badge_icon,
-              ReactComponents::Dropdowns::Notifications.new.to_s,
+              ReactComponents::Dropdowns::Notifications.new(current_user).to_s,
               render(ReactComponents::Dropdowns::Reputation.new(current_user)),
               render(ViewComponents::UserMenu.new)
             ]

app/javascript/components/dropdowns/Notifications.tsx

@@ -85,22 +85,30 @@ export const NOTIFICATIONS_CACHE_KEY = 'notifications'
 
 export default function Notifications({
   endpoint,
+  defaultUnreadCount,
 }: {
   endpoint: string
+  defaultUnreadCount: number
 }): JSX.Element {
   const queryClient = useQueryClient()
+  const [unreadCount, setUnreadCount] = useState(defaultUnreadCount)
+  // The badge is seeded from defaultUnreadCount (rendered server-side), so we
+  // don't need to fetch the notification list until the user actually opens
+  // the dropdown.
+  const [hasOpenedOnce, setHasOpenedOnce] = useState(false)
   const {
     data: resolvedData,
     error,
     status,
+    refetch,
   } = usePaginatedRequestQuery<APIResponse, unknown>(
     [NOTIFICATIONS_CACHE_KEY],
     {
       endpoint: endpoint,
       query: { per_page: MAX_NOTIFICATIONS },
       options: {
         staleTime: 30 * 1000,
-        refetchOnMount: true,
+        enabled: hasOpenedOnce,
       },
     }
   )
@@ -113,32 +121,58 @@ export default function Notifications({
   } = useNotificationDropdown(resolvedData)
 
   const connectionRef = useRef<NotificationsChannel | null>(null)
+  const hiddenRef = useRef(listAttributes.hidden)
+  const refetchRef = useRef(refetch)
+  hiddenRef.current = listAttributes.hidden
+  refetchRef.current = refetch
+
+  useEffect(() => {
+    if (!resolvedData) {
+      return
+    }
+
+    setUnreadCount(resolvedData.meta.unreadCount)
+  }, [resolvedData])
 
   useEffect(() => {
     if (!connectionRef.current) {
       connectionRef.current = new NotificationsChannel((message) => {
         if (!message) return
 
-        if (message.type === 'notifications.changed' && listAttributes.hidden) {
-          queryClient.invalidateQueries({ queryKey: [NOTIFICATIONS_CACHE_KEY] })
+        // Refetch (which also refreshes the badge count) whenever the
+        // dropdown is closed, even if it's never been opened yet. `refetch`
+        // works regardless of the query's `enabled` state. While the
+        // dropdown is open we leave the visible list alone so it doesn't
+        // shift under the user.
+        if (message.type === 'notifications.changed' && hiddenRef.current) {
+          refetchRef.current()
         }
       })
     }
 
-    if (!listAttributes.hidden) {
-      queryClient.refetchQueries({ queryKey: [NOTIFICATIONS_CACHE_KEY] })
-    }
-
     return () => {
       connectionRef.current?.disconnect()
       connectionRef.current = null
     }
-  }, [listAttributes.hidden, queryClient])
+  }, [])
+
+  useEffect(() => {
+    if (listAttributes.hidden) {
+      return
+    }
+
+    if (!hasOpenedOnce) {
+      setHasOpenedOnce(true)
+      return
+    }
+
+    queryClient.refetchQueries({ queryKey: [NOTIFICATIONS_CACHE_KEY] })
+  }, [listAttributes.hidden, hasOpenedOnce, queryClient])
 
   return (
     <React.Fragment>
       <NotificationsIcon
-        count={resolvedData?.meta?.unreadCount || 0}
+        count={unreadCount}
         aria-label="Open notifications"
         {...buttonAttributes}
       />

app/javascript/components/dropdowns/Reputation.tsx

@@ -104,6 +104,10 @@ export default function Reputation({
   const [isStale, setIsStale] = useState(false)
   const [reputation, setReputation] = useState(defaultReputation)
   const [isSeen, setIsSeen] = useState(defaultIsSeen)
+  // The badge itself is seeded from defaultReputation/defaultIsSeen (rendered
+  // server-side), so we don't need to fetch the token list until the user
+  // actually opens the dropdown.
+  const [hasOpenedOnce, setHasOpenedOnce] = useState(false)
 
   const {
     data: resolvedData,
@@ -114,8 +118,8 @@ export default function Reputation({
     endpoint: endpoint,
     query: { per_page: MAX_TOKENS },
     options: {
-      staleTime: 30,
-      refetchOnMount: true,
+      staleTime: 30 * 1000,
+      enabled: hasOpenedOnce,
     },
   })
 
@@ -159,6 +163,18 @@ export default function Reputation({
     setIsSeen(resolvedData.meta.unseenTotal === 0)
   }, [resolvedData])
 
+  useEffect(() => {
+    if (listAttributes.hidden || hasOpenedOnce) {
+      return
+    }
+
+    setHasOpenedOnce(true)
+  }, [listAttributes.hidden, hasOpenedOnce])
+
+  // Keep the badge (reputation/isSeen) fresh in the background whenever the
+  // dropdown is closed and a websocket event marks it stale — regardless of
+  // whether the list has ever been opened. `refetch` works even while the
+  // query is disabled (pre-first-open).
   useEffect(() => {
     if (!listAttributes.hidden || !isStale) {
       return

app/javascript/packs/internal.tsx

@@ -597,7 +597,10 @@ initReact({
   ),
   'dropdowns-notifications': (data: any) => (
     <Suspense fallback={<NotificationsDropdownSkeleton />}>
-      <NotificationsDropdown endpoint={data.endpoint} />
+      <NotificationsDropdown
+        endpoint={data.endpoint}
+        defaultUnreadCount={data.default_unread_count}
+      />
     </Suspense>
   ),
   'dropdowns-reputation': (data: any) => (

test/system/flows/notifications/dropdown_test.rb

@@ -58,6 +58,12 @@ class DropdownTest < ApplicationSystemTestCase
           visit dashboard_path
           find(".c-notification").click
 
+          # The list is now fetched lazily on first open, so wait for that
+          # initial (empty) fetch to resolve before creating a notification -
+          # otherwise it can race the in-flight request and appear before
+          # the dropdown is closed and reopened.
+          assert_link "See all your notifications"
+
           create :mentor_started_discussion_notification, user:, params: { discussion: }, status: :unread
           NotificationsChannel.broadcast_changed!(user)
           wait_for_websockets