perf(linearlarge): optimize rendering and query management

- Use shared context menus instead of per-row instances to reduce portal bloat
- Add query caching for issues list to prevent duplicate query instances
- Replace dayjs with native Intl.DateTimeFormat and add memoization
- Add loaderDeps to TanStack Router for proper search param tracking
- Prevent unnecessary setWindow calls in useLiveInfiniteQuery
- Normalize filter arrays for stable cache keys across collections

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: KyleAMathews

examples/react/linearlarge/src/components/IssueList.tsx

@@ -1,100 +1,50 @@
-import {
-  useLiveInfiniteQuery,
-  useLiveQuery,
-  and,
-  eq,
-  inArray,
-} from '@tanstack/react-db'
+import { useLiveInfiniteQuery, useLiveQuery } from '@tanstack/react-db'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import { useRef, useEffect, useMemo, useCallback } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useSearch } from '@tanstack/react-router'
 import IssueRow from './IssueRow'
+import { TopFilter } from './TopFilter'
+import PriorityMenu from './contextmenu/PriorityMenu'
+import StatusMenu from './contextmenu/StatusMenu'
 import { useMode } from '@/lib/mode-context'
 import { getFilterStateFromSearch } from '@/utils/filterState'
-import { TopFilter } from './TopFilter'
-import { getIssueCountQuery } from '@/lib/queries'
-
-const PAGE_SIZE = 50
+import {
+  ISSUES_PAGE_SIZE,
+  getIssueCountQuery,
+  getIssuesListQuery,
+} from '@/lib/queries'
 
 export function IssueList() {
-  const { issuesCollection } = useMode()
+  const { issuesCollection, mode } = useMode()
   const parentRef = useRef<HTMLDivElement>(null)
   const search = useSearch({ strict: false })
   const filterState = useMemo(() => getFilterStateFromSearch(search), [search])
-
-  const issueCountQuery = getIssueCountQuery({
-    status: filterState.status,
-    priority: filterState.priority,
-  })
-
-  const { data: countData } = useLiveQuery(() => issueCountQuery, [search])
-
-  const totalCount = countData?.[0]?.count
+  const issuesQuery = useMemo(
+    () => getIssuesListQuery(filterState, mode),
+    [filterState, mode]
+  )
+  const issueCountQuery = useMemo(
+    () => getIssueCountQuery(filterState),
+    [filterState]
+  )
+  const { data: countData } = useLiveQuery(issueCountQuery)
+  const totalCount = countData[0].count
 
   const {
     data: issues,
     status,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-    pages,
-  } = useLiveInfiniteQuery(
-    (q) => {
-      let query = q.from({ issue: issuesCollection })
-
-      // Apply filters using declarative expressions
-      if (filterState.status?.length || filterState.priority?.length) {
-        query = query.where(({ issue }) => {
-          const conditions = []
-
-          if (filterState.status?.length) {
-            // Use inArray for multiple values or eq for single value
-            if (filterState.status.length === 1) {
-              conditions.push(eq(issue.status, filterState.status[0]))
-            } else {
-              conditions.push(inArray(issue.status, filterState.status))
-            }
-          }
-
-          if (filterState.priority?.length) {
-            // Use inArray for multiple values or eq for single value
-            if (filterState.priority.length === 1) {
-              conditions.push(eq(issue.priority, filterState.priority[0]))
-            } else {
-              conditions.push(inArray(issue.priority, filterState.priority))
-            }
-          }
-
-          return conditions.length === 1 ? conditions[0] : and(...conditions)
-        })
+  } = useLiveInfiniteQuery(issuesQuery, {
+    pageSize: ISSUES_PAGE_SIZE,
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.length === ISSUES_PAGE_SIZE) {
+        return allPages.length
       }
-
-      // Apply ordering
-      const orderField =
-        filterState.orderBy === 'created_at' ? 'created_at' : 'modified'
-      return query.orderBy(
-        ({ issue }) => issue[orderField],
-        filterState.orderDirection
-      )
-    },
-    {
-      pageSize: PAGE_SIZE,
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      gcTime: 10 * 60 * 1000, // Keep in cache for 10 minutes
-      getNextPageParam: (lastPage, allPages) => {
-        // Continue fetching as long as the last page was full
-        // This is the standard infinite scroll pattern
-        if (lastPage.length === PAGE_SIZE) {
-          return allPages.length // Return next page index
-        }
-        // If we got fewer items than pageSize, we've reached the end
-        return undefined
-      },
+      return undefined
     },
-    [search]
-  )
-
-  console.log(`render`, { issues })
+  })
 
   // Memoize getScrollElement to avoid recreating virtualizer
   const getScrollElement = useCallback(() => parentRef.current, [])
@@ -103,12 +53,12 @@ export function IssueList() {
     count: totalCount ?? issues.length,
     getScrollElement,
     estimateSize: () => 36,
-    overscan: 50,
+    overscan: 25,
   })
 
   // Reset virtualizer to top when filters change
   useEffect(() => {
-    virtualizer.scrollToIndex(0, { align: 'start' })
+    virtualizer.scrollToIndex(0, { align: `start` })
   }, [
     filterState.status,
     filterState.priority,
@@ -122,7 +72,7 @@ export function IssueList() {
   const lastVirtualItem = virtualItems[virtualItems.length - 1]
 
   useEffect(() => {
-    if (!lastVirtualItem) return
+    if (virtualItems.length === 0) return
 
     const loadedCount = issues.length
 
@@ -134,13 +84,12 @@ export function IssueList() {
       fetchNextPage()
     }
   }, [
+    virtualItems.length,
     lastVirtualItem,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
     issues.length,
-    totalCount,
-    pages.length,
   ])
 
   if (status === `loading`) {
@@ -231,6 +180,9 @@ export function IssueList() {
           )}
         </div>
       </div>
+      {/* Shared context menus (render once instead of per row to avoid portal bloat) */}
+      <PriorityMenu issuesCollection={issuesCollection} />
+      <StatusMenu issuesCollection={issuesCollection} />
     </>
   )
 }

examples/react/linearlarge/src/components/IssueRow.tsx

@@ -1,37 +1,21 @@
 import type { CSSProperties } from 'react'
-import { BsCloudCheck as SyncedIcon } from 'react-icons/bs'
-import { BsCloudSlash as UnsyncedIcon } from 'react-icons/bs'
-import PriorityMenu from './contextmenu/PriorityMenu'
-import StatusMenu from './contextmenu/StatusMenu'
 import PriorityIcon from './PriorityIcon'
 import StatusIcon from './StatusIcon'
 import Avatar from './Avatar'
 import { memo } from 'react'
 import { Link } from '@tanstack/react-router'
+import { ContextMenuTrigger } from '@firefox-devtools/react-contextmenu'
 import { formatDate } from '../utils/date'
 import type { Issue } from '@/db/schema'
-import { useMode } from '@/lib/mode-context'
+import { PRIORITY_MENU_ID } from './contextmenu/PriorityMenu'
+import { STATUS_MENU_ID } from './contextmenu/StatusMenu'
 
 interface Props {
   issue: Issue | undefined
   style: CSSProperties
 }
 
 function IssueRow({ issue, style }: Props) {
-  const { issuesCollection } = useMode()
-
-  const handleChangeStatus = async (status: string) => {
-    if (!issue?.id) return
-    issuesCollection.update(issue.id, { status: status as Issue['status'] })
-  }
-
-  const handleChangePriority = async (priority: string) => {
-    if (!issue?.id) return
-    issuesCollection.update(issue.id, {
-      priority: priority as Issue['priority'],
-    })
-  }
-
   if (!issue?.id) {
     return (
       <div
@@ -50,28 +34,32 @@ function IssueRow({ issue, style }: Props) {
       id={issue.id}
       style={style}
     >
-      <div className="flex-shrink-0 ml-4">
-        <PriorityMenu
-          id={`r-priority-` + issue.id}
-          button={<PriorityIcon priority={issue.priority} />}
-          onSelect={handleChangePriority}
-        />
-      </div>
-      <div className="flex-shrink-0 ml-3">
-        <StatusMenu
-          id={`r-status-` + issue.id}
-          button={<StatusIcon status={issue.status} />}
-          onSelect={handleChangeStatus}
-        />
-      </div>
+      <ContextMenuTrigger
+        id={PRIORITY_MENU_ID}
+        collect={() => ({ issueId: issue.id, priority: issue.priority })}
+        holdToDisplay={-1}
+        triggerOnLeftClick
+        attributes={{ className: 'flex-shrink-0 ml-4 cursor-pointer' }}
+      >
+        <PriorityIcon priority={issue.priority} />
+      </ContextMenuTrigger>
+      <ContextMenuTrigger
+        id={STATUS_MENU_ID}
+        collect={() => ({ issueId: issue.id, status: issue.status })}
+        holdToDisplay={-1}
+        triggerOnLeftClick
+        attributes={{ className: 'flex-shrink-0 ml-3 cursor-pointer' }}
+      >
+        <StatusIcon status={issue.status} />
+      </ContextMenuTrigger>
       <Link
         to="/issue/$issueId"
         params={{ issueId: issue.id }}
         search={(prev) => prev}
         className="flex items-center flex-grow min-w-0 h-full"
       >
         <div className="flex-wrap flex-shrink ml-3 overflow-hidden font-medium line-clamp-1 overflow-ellipsis">
-          {issue.title.slice(0, 3000) || ''}
+          {issue.title || ''}
         </div>
         <div className="flex-shrink-0 hidden w-15 ml-auto font-normal text-gray-500 sm:block whitespace-nowrap">
           {formatDate(issue.created_at)}

examples/react/linearlarge/src/components/contextmenu/PriorityMenu.tsx

@@ -1,30 +1,32 @@
-import { Portal } from '../Portal'
-import { ReactNode, useState } from 'react'
-import { ContextMenuTrigger } from '@firefox-devtools/react-contextmenu'
+import { useState } from 'react'
+import { connectMenu, type ConnectMenuProps } from '@firefox-devtools/react-contextmenu'
+import type { Collection } from '@tanstack/db'
+import type { Issue } from '@/db/schema'
 import { Menu } from './menu'
 import { PriorityOptions } from '../../types/types'
+import { Portal } from '../Portal'
 
-interface Props {
-  id: string
-  button: ReactNode
-  filterKeyword?: boolean
-  className?: string
-  onSelect?: (item: string) => void
+export const PRIORITY_MENU_ID = 'priority-menu'
+
+interface PriorityMenuProps extends ConnectMenuProps {
+  issuesCollection: Collection<Issue>
 }
 
-function PriorityMenu({
-  id,
-  button,
-  filterKeyword = false,
-  className,
-  onSelect,
-}: Props) {
+function PriorityMenuBase({ trigger, issuesCollection }: PriorityMenuProps) {
   const [keyword, setKeyword] = useState(``)
+  const data = (trigger?.data || {}) as {
+    issueId?: string
+    priority?: Issue['priority']
+  }
 
-  const handleSelect = (priority: string) => {
+  const handleSelect = async (priority: string) => {
     setKeyword(``)
-    if (onSelect) onSelect(priority)
+    if (!data.issueId) return
+    await issuesCollection.update(data.issueId, {
+      priority: priority as Issue['priority'],
+    })
   }
+
   let statusOpts = PriorityOptions
   if (keyword !== ``) {
     const normalizedKeyword = keyword.toLowerCase().trim()
@@ -35,36 +37,36 @@ function PriorityMenu({
   }
 
   const options = statusOpts.map(([Icon, priority, label]) => {
+    const isActive = data.priority === priority
     return (
       <Menu.Item
         key={`priority-${priority}`}
         onClick={() => handleSelect(priority as string)}
       >
-        <Icon className="mr-3" /> <span>{label}</span>
+        <Icon className="mr-3" />
+        <span className={isActive ? 'font-semibold text-gray-800' : undefined}>
+          {label}
+        </span>
       </Menu.Item>
     )
   })
 
   return (
-    <>
-      <ContextMenuTrigger id={id} holdToDisplay={1}>
-        {button}
-      </ContextMenuTrigger>
-
-      <Portal>
-        <Menu
-          id={id}
-          size="small"
-          filterKeyword={filterKeyword}
-          searchPlaceholder="Set priority..."
-          onKeywordChange={(kw) => setKeyword(kw)}
-          className={className}
-        >
-          {options}
-        </Menu>
-      </Portal>
-    </>
+    <Portal>
+      <Menu
+        id={PRIORITY_MENU_ID}
+        size="small"
+        filterKeyword={true}
+        searchPlaceholder="Set priority..."
+        onKeywordChange={(kw) => setKeyword(kw)}
+        className="max-h-[60vh] overflow-y-auto"
+      >
+        {options}
+      </Menu>
+    </Portal>
   )
 }
 
+const PriorityMenu = connectMenu(PRIORITY_MENU_ID)(PriorityMenuBase)
+
 export default PriorityMenu