Share the People loading status and drop callbacks nothing observes

Author: waleedlatif1

apps/sim/platform/app/(shell)/people/_components/directory/directory.module.css

@@ -20,9 +20,3 @@
   inline-size: var(--spacing-224);
   max-inline-size: 100%;
 }
-
-.status {
-  color: var(--ui-secondary);
-  padding-block: var(--spacing-48);
-  text-align: center;
-}

apps/sim/platform/app/(shell)/people/_components/directory/directory.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import styles from '@/platform/app/(shell)/people/_components/directory/directory.module.css'
+import { PeopleStatus } from '@/platform/app/(shell)/people/_components/people-page/people-status'
 import {
   Button,
   DataTable,
@@ -99,9 +100,7 @@ export function PeopleDirectory({ organizationId }: PeopleDirectoryProps) {
         </div>
       )}
       {directory.loading ? (
-        <p className={styles.status} role='status' data-type='T060'>
-          Loading people…
-        </p>
+        <PeopleStatus>Loading people…</PeopleStatus>
       ) : directory.error ? (
         <InlineNotice
           intent='danger'

apps/sim/platform/app/(shell)/people/_components/org-chart/chart-empty-state.tsx

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react'
+import type { MouseEvent, RefCallback } from 'react'
 import Link from 'next/link'
 import styles from '@/platform/app/(shell)/people/_components/org-chart/org-chart.module.css'
 import { Button, EmptyState } from '@/platform/design-system/components'
@@ -20,6 +20,7 @@ interface ChartEmptyStateProps {
   person: PersonSummary
   profileQuery: string
   onFocus: (memberId: string, event: MouseEvent<HTMLButtonElement>) => void
+  currentPersonRef: RefCallback<HTMLElement>
   onImport?: () => void
   onSync?: () => void
 }
@@ -29,6 +30,7 @@ export function ChartEmptyState({
   person,
   profileQuery,
   onFocus,
+  currentPersonRef,
   onImport,
   onSync,
 }: ChartEmptyStateProps) {
@@ -59,7 +61,11 @@ export function ChartEmptyState({
             )
           )}
           {emptyOrganization && onImport && <Button onClick={onImport}>Import people</Button>}
-          <Button render={<Link href={personHref(person.memberId, profileQuery)} />}>
+          <Button
+            render={
+              <Link ref={currentPersonRef} href={personHref(person.memberId, profileQuery)} />
+            }
+          >
             View profile
           </Button>
         </div>

apps/sim/platform/app/(shell)/people/_components/org-chart/org-chart.module.css

@@ -43,12 +43,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.status {
-  color: var(--ui-secondary);
-  padding-block: var(--spacing-48);
-  text-align: center;
-}
-
 .canvas {
   display: grid;
   justify-items: center;

apps/sim/platform/app/(shell)/people/_components/org-chart/org-chart.tsx

@@ -4,6 +4,7 @@ import { Fragment, type MouseEvent, useCallback, useLayoutEffect, useRef } from
 import { ChartCanvas } from '@/platform/app/(shell)/people/_components/org-chart/chart-canvas'
 import { ChartEmptyState } from '@/platform/app/(shell)/people/_components/org-chart/chart-empty-state'
 import styles from '@/platform/app/(shell)/people/_components/org-chart/org-chart.module.css'
+import { PeopleStatus } from '@/platform/app/(shell)/people/_components/people-page/people-status'
 import {
   Button,
   EmptyState,
@@ -62,17 +63,14 @@ export function OrgChart({ organization, onImport, onSync }: OrgChartProps) {
     trigger: HTMLElement
     target: FocusTarget
   } | null>(null)
-  const focusPerson = useCallback(
-    (id: string, event?: MouseEvent<HTMLButtonElement>) => {
-      // `detail === 0` is a keyboard click: focus follows the navigation instead of being lost.
-      pendingFocus.current =
-        event?.detail === 0
-          ? { focus: id, page: 1, trigger: event.currentTarget, target: 'person' }
-          : null
-      void setView({ focus: id, page: 1, view: 'chart' }, { history: 'push' })
-    },
-    [setView]
-  )
+  const focusPerson = (id: string, event?: MouseEvent<HTMLButtonElement>) => {
+    // `detail === 0` is a keyboard click: focus follows the navigation instead of being lost.
+    pendingFocus.current =
+      event?.detail === 0
+        ? { focus: id, page: 1, trigger: event.currentTarget, target: 'person' }
+        : null
+    void setView({ focus: id, page: 1, view: 'chart' }, { history: 'push' })
+  }
   const changePage = (
     value: number,
     target: 'previous' | 'next',
@@ -118,6 +116,7 @@ export function OrgChart({ organization, onImport, onSync }: OrgChartProps) {
           person={branch.person}
           profileQuery={profileQuery}
           onFocus={focusPerson}
+          currentPersonRef={setCurrentPerson}
           onImport={onImport}
           onSync={onSync}
         />
@@ -218,9 +217,7 @@ export function OrgChart({ organization, onImport, onSync }: OrgChartProps) {
           />
         )
       ) : (
-        <p className={styles.status} role='status' data-type='T060'>
-          Loading org chart…
-        </p>
+        <PeopleStatus>Loading org chart…</PeopleStatus>
       )}
     </section>
   )

apps/sim/platform/app/(shell)/people/_components/people-page/people-frame.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import styles from '@/platform/app/(shell)/people/_components/people-page/people-page.module.css'
+import { PeopleStatus } from '@/platform/app/(shell)/people/_components/people-page/people-status'
 
 interface PeopleFrameProps {
   title?: string
@@ -16,13 +17,7 @@ export function PeopleFrame({ title = 'People', actions, loading, children }: Pe
         <h1 data-type='T076'>{title}</h1>
         {actions && <div className={styles.actions}>{actions}</div>}
       </header>
-      {loading ? (
-        <p className={styles.status} role='status' data-type='T060'>
-          {loading}
-        </p>
-      ) : (
-        children
-      )}
+      {loading ? <PeopleStatus>{loading}</PeopleStatus> : children}
     </main>
   )
 }

apps/sim/platform/app/(shell)/people/_components/people-page/people-status.tsx

@@ -0,0 +1,14 @@
+import styles from '@/platform/app/(shell)/people/_components/people-page/people-page.module.css'
+
+interface PeopleStatusProps {
+  children: string
+}
+
+/** The body of a People view while its first read is pending, the same size in every view. */
+export function PeopleStatus({ children }: PeopleStatusProps) {
+  return (
+    <p className={styles.status} role='status' data-type='T060'>
+      {children}
+    </p>
+  )
+}

apps/sim/platform/checks/live/members.spec.ts

@@ -1,5 +1,5 @@
 import { expect, type Page, test } from '@playwright/test'
-import { requireEnv, signIn } from './session'
+import { requireEnv, signIn } from '@/platform/checks/live/session'
 
 /**
  * Mutates the seeded organization. `PLATFORM_LIVE_EMAIL` is an administrator,

apps/sim/platform/checks/live/people.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { requireEnv, signIn } from './session'
+import { requireEnv, signIn } from '@/platform/checks/live/session'
 
 /**
  * `PLATFORM_LIVE_EMAIL` is an administrator in an organization with the `people` flag on.

apps/sim/platform/lib/data/people.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useQueryStates } from 'nuqs'
 import { isApiClientError } from '@/lib/api/client/errors'
 import type {
@@ -353,26 +353,23 @@ export function useDirectorySync(organizationId: string) {
   const query = usePeopleSyncStatus(organizationId)
   const actions = usePeopleSyncActions(organizationId)
   const status = isDirectorySyncAccessError(query.error) ? undefined : query.data
-  const connect = useCallback(
-    (draft: SyncDraft, onConnected: () => void): SyncFieldErrors | null => {
-      const parsed = peopleSyncConfigSchema.safeParse(
-        draft.source === 'okta'
-          ? { source: 'okta', domain: draft.domain, token: draft.token }
-          : draft.source === 'entra'
-            ? {
-                source: 'entra',
-                tenantId: draft.tenantId.trim(),
-                clientId: draft.clientId.trim(),
-                clientSecret: draft.clientSecret,
-              }
-            : { source: 'scim' }
-      )
-      if (!parsed.success) return flattenFieldErrors(parsed.error)
-      actions.configure(parsed.data, onConnected)
-      return null
-    },
-    [actions]
-  )
+  const connect = (draft: SyncDraft, onConnected: () => void): SyncFieldErrors | null => {
+    const parsed = peopleSyncConfigSchema.safeParse(
+      draft.source === 'okta'
+        ? { source: 'okta', domain: draft.domain, token: draft.token }
+        : draft.source === 'entra'
+          ? {
+              source: 'entra',
+              tenantId: draft.tenantId.trim(),
+              clientId: draft.clientId.trim(),
+              clientSecret: draft.clientSecret,
+            }
+          : { source: 'scim' }
+    )
+    if (!parsed.success) return flattenFieldErrors(parsed.error)
+    actions.configure(parsed.data, onConnected)
+    return null
+  }
   return {
     loading: query.isPending,
     loaded: Boolean(status),