Give each route its loading geometry and stop a chunk re-rendering the transcript

Settings, chat and Search gain loading routes, and the People and Home skeletons
match what replaces them. Runtime handlers keep one identity and what awaits a
decision has its own context, so a settled turn stays rendered across a stream.
The scroll observer tracks only the rows that came or went.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/search-params.ts

@@ -20,8 +20,6 @@ import {
  * the raw input value (consumers trim on read).
  */
 
-export { parseAsDateString }
-
 const DEFAULT_TIME_RANGE: TimeRange = 'All time'
 
 const VALID_LEVELS = ['error', 'info', 'running', 'pending'] as const

apps/sim/hooks/queries/organization.ts

@@ -30,14 +30,16 @@ import {
 } from '@/lib/api/contracts/organization'
 import { client } from '@/lib/auth/client'
 import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
-import { organizationKeys } from '@/hooks/queries/utils/organization-keys'
+import {
+  ORGANIZATION_ROSTER_STALE_TIME,
+  organizationKeys,
+} from '@/hooks/queries/utils/organization-keys'
 import { organizationUsageKeys } from '@/hooks/queries/utils/organization-usage-keys'
 import { subscriptionKeys } from '@/hooks/queries/utils/subscription-keys'
 import { workspaceKeys } from '@/hooks/queries/workspace'
 
 const invitationListsKey = ['invitations', 'list'] as const
 
-export const ORGANIZATION_ROSTER_STALE_TIME = 30 * 1000
 export const ORGANIZATION_DETAIL_STALE_TIME = 30 * 1000
 export const ORGANIZATION_MEMBER_USAGE_LIMIT_STALE_TIME = 30 * 1000
 /**

apps/sim/hooks/queries/utils/organization-keys.ts

@@ -1,3 +1,5 @@
+export const ORGANIZATION_ROSTER_STALE_TIME = 30 * 1000
+
 export const organizationKeys = {
   all: ['organizations'] as const,
   lists: () => [...organizationKeys.all, 'list'] as const,

apps/sim/platform/app/(shell)/_components/chat/cards/assistant-review.tsx

@@ -6,7 +6,7 @@ import type {
   AssistantReceipt,
   AssistantReviewAction,
 } from '@/platform/app/(shell)/_components/chat/model'
-import { useChatRuntime } from '@/platform/app/(shell)/_components/session/chat-runtime'
+import { useChatInteractions } from '@/platform/app/(shell)/_components/session/chat-runtime'
 import { Button, FailureNotice, InlineNotice, StatusTag } from '@/platform/design-system/components'
 import { Input, TextArea } from '@/platform/design-system/components/field/inputs'
 
@@ -132,7 +132,7 @@ function Receipt({ receipt }: { receipt: AssistantReceipt }) {
  * the turn they belong to; failure to load is shown rather than read as nothing to review.
  */
 export function AssistantReview({ turnId }: { turnId: string }) {
-  const { review } = useChatRuntime()
+  const { review } = useChatInteractions()
   const [edits, setEdits] = useState<Edits>({})
   const [failure, setFailure] = useState('')
   if (!review || review.turnId !== turnId) return null

apps/sim/platform/app/(shell)/_components/chat/cards/tool-approval.tsx

@@ -5,7 +5,10 @@ import { generateId } from '@sim/utils/id'
 import styles from '@/platform/app/(shell)/_components/chat/cards/cards.module.css'
 import type { PlatformTool, ToolDecision } from '@/platform/app/(shell)/_components/chat/model'
 import { usePlatformNotices } from '@/platform/app/(shell)/_components/notification-tray/notification-tray'
-import { useChatRuntime } from '@/platform/app/(shell)/_components/session/chat-runtime'
+import {
+  useChatHandlers,
+  useChatInteractions,
+} from '@/platform/app/(shell)/_components/session/chat-runtime'
 import { ActionMenu, Button, Icon } from '@/platform/design-system/components'
 import { ActivityBody } from '@/platform/design-system/components/activity-row/activity-body'
 
@@ -16,7 +19,8 @@ const BROWSER_TOOL = /^browser[_-]/
  * turn, until one of these is answered; a failed answer restores the buttons so it can be retried.
  */
 export function ToolApproval({ tool }: { tool: PlatformTool }) {
-  const { approvals, registerApproval, decideTools } = useChatRuntime()
+  const { approvals } = useChatInteractions()
+  const { registerApproval, decideTools } = useChatHandlers()
   const { notify } = usePlatformNotices()
   const [expired, setExpired] = useState(false)
   useEffect(() => registerApproval(tool.id), [registerApproval, tool.id])

apps/sim/platform/app/(shell)/_components/chat/conversation/conversation-skeleton.tsx

@@ -0,0 +1,16 @@
+import styles from '@/platform/app/(shell)/_components/chat/conversation/conversation.module.css'
+
+/** A conversation's frame while the route decides whether the viewer may open it. */
+export function ConversationSkeleton() {
+  return (
+    <div className={styles.chat} role='status' aria-label='Loading conversation' aria-busy='true'>
+      <header className={styles.header} data-desktop-drag='' />
+      <div className={styles.reading} />
+      <div className={styles.dock}>
+        <div className={styles.dockInner}>
+          <div className={styles.composerPlaceholder} />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/platform/app/(shell)/_components/chat/conversation/conversation.module.css

@@ -85,3 +85,8 @@
   font-weight: var(--font-weight-medium);
   color: var(--ui-ink);
 }
+.composerPlaceholder {
+  block-size: var(--spacing-132);
+  border-radius: var(--ui-control-radius);
+  background: var(--control-muted-fill);
+}

apps/sim/platform/app/(shell)/_components/chat/conversation/conversation.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import { memo, type ReactNode, useLayoutEffect, useRef, useState } from 'react'
 import styles from '@/platform/app/(shell)/_components/chat/conversation/conversation.module.css'
 import { QueuedMessages } from '@/platform/app/(shell)/_components/chat/conversation/queued-messages'
 import { ResponseMessage } from '@/platform/app/(shell)/_components/chat/message/response-message'
@@ -19,7 +19,8 @@ import {
 } from '@/platform/design-system/components'
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
 
-function Turn({ turn }: { turn: PlatformTurn }) {
+/** A settled turn keeps its identity, so only the streaming one renders per chunk. */
+const Turn = memo(function Turn({ turn }: { turn: PlatformTurn }) {
   if (turn.role === 'user') return <UserMessage turn={turn} />
   if (turn.role === 'automated')
     return (
@@ -28,7 +29,7 @@ function Turn({ turn }: { turn: PlatformTurn }) {
       </p>
     )
   return <ResponseMessage turn={turn} />
-}
+})
 
 /** One exchange per article: a person's message and what answered it. */
 function groupExchanges(turns: readonly PlatformTurn[]): PlatformTurn[][] {

apps/sim/platform/app/(shell)/_components/chat/message/message-segments.tsx

@@ -10,7 +10,7 @@ import type {
   PlatformCredentialSubmission,
   PlatformSegment,
 } from '@/platform/app/(shell)/_components/chat/model'
-import { useChatRuntime } from '@/platform/app/(shell)/_components/session/chat-runtime'
+import { useChatHandlers } from '@/platform/app/(shell)/_components/session/chat-runtime'
 import { Button, InlineNotice } from '@/platform/design-system/components'
 
 export interface CredentialCardProps {
@@ -36,7 +36,7 @@ const Cards = createContext<ChatCards | null>(null)
 export const ChatCardsProvider = Cards.Provider
 
 function Segment({ segment }: { segment: PlatformSegment }) {
-  const runtime = useChatRuntime()
+  const runtime = useChatHandlers()
   const cards = useContext(Cards)
   switch (segment.kind) {
     case 'markdown':

apps/sim/platform/app/(shell)/_components/chat/message/response-actions.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import styles from '@/platform/app/(shell)/_components/chat/message/message.module.css'
 import { MessageTime } from '@/platform/app/(shell)/_components/chat/message/message-time'
 import type { PlatformTurn } from '@/platform/app/(shell)/_components/chat/model'
-import { useChatRuntime } from '@/platform/app/(shell)/_components/session/chat-runtime'
+import { useChatHandlers } from '@/platform/app/(shell)/_components/session/chat-runtime'
 import {
   ActionMenu,
   CopyButton,
@@ -24,7 +24,7 @@ interface ResponseActionsProps {
 
 export function ResponseActions({ turn }: ResponseActionsProps) {
   const { copyText: text, sentAt } = turn
-  const { rate, fork } = useChatRuntime()
+  const { rate, fork } = useChatHandlers()
   const [feedback, setFeedback] = useState<Rating | null>(null)
   const [rating, setRating] = useState<Rating | null>(null)
   const [details, setDetails] = useState('')