fix(org): give each loading state the shape of what replaces it

Subscription, Seats, Single sign-on, Sources and tool permissions held bare rows
or a heading the loaded page lacks. Home's workspace rows lost their detail line
while settling and the activity chart its range control, so the page moved when
the read answered. A settling list now marks itself busy.

Author: waleedlatif1

apps/sim/platform/embedded/app/(shell)/_components/section-parts/section-parts.tsx

@@ -3,7 +3,10 @@
 import type { ReactNode } from 'react'
 import Link from 'next/link'
 import { Button } from '@/platform/design-system/components/button/button'
-import { SettingsSection } from '@/platform/design-system/components/settings-section/settings-section'
+import {
+  SettingsSection,
+  SettingsSurface,
+} from '@/platform/design-system/components/settings-section/settings-section'
 import { LoadingRows } from '@/platform/design-system/components/status/query-boundary'
 import { InlineNotice } from '@/platform/design-system/components/status/status'
 import styles from '@/platform/embedded/app/(shell)/_components/section-parts/section-parts.module.css'
@@ -154,15 +157,23 @@ export function DraftConflictNotice({ onKeepMine, onTakeLatest }: DraftConflictN
   )
 }
 
-interface SectionSkeletonProps {
-  title: string
-  rows?: number
-}
-
-export function SectionSkeleton({ title, rows }: SectionSkeletonProps) {
+type SectionSkeletonProps = { rows?: number } & (
+  | { title: string; label?: never }
+  /** A section that opens with a card and no heading, like a Subscription's plan. */
+  | { title?: never; label: string }
+)
+
+/** A read's place in the page, inside the heading and card it will fill. */
+export function SectionSkeleton({ title, label, rows }: SectionSkeletonProps) {
+  if (title)
+    return (
+      <SettingsSection title={title}>
+        <LoadingRows label={`Loading ${title}`} rows={rows} />
+      </SettingsSection>
+    )
   return (
-    <SettingsSection title={title}>
-      <LoadingRows label={`Loading ${title}`} rows={rows} />
-    </SettingsSection>
+    <SettingsSurface>
+      <LoadingRows label={label ?? 'Loading'} rows={rows} />
+    </SettingsSurface>
   )
 }

apps/sim/platform/embedded/app/(shell)/home/_components/activity-chart/activity-chart.tsx

@@ -114,7 +114,7 @@ export function HomeActivityChart({
             </span>
           )}
         </div>
-        {(ready || days !== ACTIVITY_WINDOW_DAYS[0]) && (
+        {(state.status !== 'error' || days !== ACTIVITY_WINDOW_DAYS[0]) && (
           <RangePicker
             label='Range'
             options={RANGE_LABELS}
@@ -125,7 +125,7 @@ export function HomeActivityChart({
           />
         )}
       </header>
-      {state.status === 'loading' && <SkeletonBlock label={`Loading ${title}`} />}
+      {state.status === 'loading' && <SkeletonBlock label={`Loading ${title}`} shape='chart' />}
       {state.status === 'error' && (
         <FailureNotice
           intent='warning'

apps/sim/platform/embedded/app/(shell)/home/_components/home-workspaces/home-workspaces.tsx

@@ -25,8 +25,11 @@ interface HomeWorkspacesProps {
   onRetry: () => void
 }
 
-/** Shown while a row's activity is read, since an empty slot would claim the workspace is idle. */
-const SETTLING_METADATA = '…'
+/**
+ * Stands in for a row's detail while its activity is read: an empty slot would claim the workspace
+ * is idle, and the line holds the row at the height the answer will give it.
+ */
+const SETTLING_DETAIL = '…'
 
 function metadataOf(item: HomeWorkspaceItem, asOf: number) {
   if (item.status) return STATUS_LABEL[item.status]
@@ -64,14 +67,14 @@ export function HomeWorkspaces({ state, count, asOf, onRetry }: HomeWorkspacesPr
               onRetry={onRetry}
             />
           )}
-          <div className={styles.viewport}>
+          <div className={styles.viewport} aria-busy={state.settling || undefined}>
             <RowList dividers>
               {state.items.slice(0, visibleCount).map((item) => (
                 <ActivityRow
                   key={item.id}
                   title={item.name}
-                  detail={item.detail}
-                  metadata={state.settling ? SETTLING_METADATA : metadataOf(item, asOf)}
+                  detail={state.settling ? SETTLING_DETAIL : item.detail}
+                  metadata={state.settling ? undefined : metadataOf(item, asOf)}
                   metadataLeading={item.status === 'running' ? <Spinner /> : undefined}
                   render={<SettingsGuardedLink href={item.href} />}
                 />

apps/sim/platform/embedded/app/(shell)/home/_components/widget-skeleton/widget-skeleton.module.css

@@ -40,6 +40,10 @@
   border-radius: var(--ui-control-radius);
   background: var(--control-muted-fill);
 }
+/* The total, plot and ticks together, so the sections below stay put when the chart arrives. */
+.block[data-shape="chart"] {
+  block-size: calc(var(--spacing-chart-plot) + var(--spacing-56) + var(--spacing-32));
+}
 .lane {
   display: flex;
   gap: var(--ui-list-gap);

apps/sim/platform/embedded/app/(shell)/home/_components/widget-skeleton/widget-skeleton.tsx

@@ -50,11 +50,17 @@ export function WidgetSkeleton({
   )
 }
 
+interface SkeletonBlockProps extends SkeletonPlaceholderProps {
+  /** A chart's height, where the block sits under the chart's own heading. */
+  shape?: 'chart'
+}
+
 /** The same fill for a chart or schedule, whose shape has no rows. */
-export function SkeletonBlock({ label, silent }: SkeletonPlaceholderProps) {
+export function SkeletonBlock({ label, silent, shape }: SkeletonBlockProps) {
   return (
     <div
       className={styles.block}
+      data-shape={shape}
       role={silent ? undefined : 'status'}
       aria-label={silent ? undefined : label}
       aria-hidden={silent || undefined}

apps/sim/platform/embedded/app/(shell)/integrations/_components/tool-permissions/tool-permissions-panel.tsx

@@ -5,7 +5,10 @@ import { integrationViewParsers } from '@/lib/organizations/integrations-search-
 import { useDebouncedSearchSetter } from '@/hooks/use-debounced-search-setter'
 import { QueryBoundary } from '@/platform/design-system/components'
 import { ProviderHeading } from '@/platform/embedded/app/(shell)/integrations/_components/provider-heading/provider-heading'
-import { ToolPermissions } from '@/platform/embedded/app/(shell)/integrations/_components/tool-permissions/tool-permissions'
+import {
+  ToolPermissions,
+  ToolPermissionsSkeleton,
+} from '@/platform/embedded/app/(shell)/integrations/_components/tool-permissions/tool-permissions'
 import { useToolPermissions } from '@/platform/embedded/lib/data/integrations'
 
 interface ToolPermissionsPanelProps {
@@ -31,6 +34,7 @@ export function ToolPermissionsPanel({
         query={{ ...query, data: undefined }}
         failure='Could not load tool permissions'
         loadingLabel='Loading tool permissions'
+        loading={<ToolPermissionsSkeleton />}
       >
         {() => null}
       </QueryBoundary>

apps/sim/platform/embedded/app/(shell)/integrations/_components/tool-permissions/tool-permissions.tsx

@@ -1,4 +1,4 @@
-import { SectionSearch } from '@/platform/design-system/components'
+import { LoadingRows, SectionSearch } from '@/platform/design-system/components'
 import { EmptyState } from '@/platform/design-system/components/empty-state/empty-state'
 import { CountedLabel } from '@/platform/design-system/components/overflow-text/counted-label'
 import { SegmentedControl } from '@/platform/design-system/components/segmented-control/segmented-control'
@@ -25,6 +25,18 @@ interface ToolPermissionsProps {
   onChange: (change: ToolPermissionChange) => void
 }
 
+/** The section's heading over rows, as its read will fill it. */
+export function ToolPermissionsSkeleton() {
+  return (
+    <section className={styles.section} aria-label='Tool permissions'>
+      <div className={styles.intro}>
+        <h2 data-type='T093'>Tool permissions</h2>
+      </div>
+      <LoadingRows label='Loading tool permissions' />
+    </section>
+  )
+}
+
 export function ToolPermissions({
   permissions,
   query,

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/billing/billing-view.tsx

@@ -48,7 +48,7 @@ function UsageLimit({ field }: { field: ReturnType<typeof useBillingSection>['us
 
 export function BillingView({ organization }: Pick<SettingsSectionProps, 'organization'>) {
   const billing = useBillingSection(organization)
-  if (billing.status === 'pending') return <SectionSkeleton title='Plan' rows={1} />
+  if (billing.status === 'pending') return <SectionSkeleton label='Loading plan' rows={1} />
   if (billing.status === 'error')
     return <FailureNotice message={billing.error} onRetry={billing.retry} />
   return (

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/integrations/integrations-section.tsx

@@ -35,7 +35,6 @@ import {
   ConfirmDialog,
   EmptyState,
   FailureNotice,
-  LoadingRows,
   SectionSearch,
 } from '@/platform/design-system/components'
 import {
@@ -46,6 +45,7 @@ import { IntegrationMark } from '@/platform/embedded/app/(shell)/_components/int
 import {
   ActionRow,
   Muted,
+  SectionSkeleton,
   SectionStack,
   SectionToolbar,
 } from '@/platform/embedded/app/(shell)/_components/section-parts/section-parts'
@@ -179,7 +179,7 @@ export default function IntegrationsSection({ organization: context }: SettingsS
             }}
           />
         ) : !policies.data || !secrets.data ? (
-          <LoadingRows label='Loading sources' />
+          <SectionSkeleton title='Added sources' />
         ) : added.length === 0 && !secretSource && !search && !assistantVisible ? (
           <EmptyState title='No sources yet. Add a source to get started.' />
         ) : (

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/members/seats-overview.tsx

@@ -2,11 +2,12 @@ import { getErrorMessage } from '@sim/utils/errors'
 import Link from 'next/link'
 import { getOrganizationSettingsHref } from '@/components/settings/navigation'
 import { useOrganization } from '@/lib/organizations/provider'
-import { Button, FailureNotice, LoadingRows, StatusTag } from '@/platform/design-system/components'
+import { Button, FailureNotice, StatusTag } from '@/platform/design-system/components'
 import {
   SettingsRow,
   SettingsSection,
 } from '@/platform/design-system/components/settings-section/settings-section'
+import { SectionSkeleton } from '@/platform/embedded/app/(shell)/_components/section-parts/section-parts'
 import styles from '@/platform/embedded/app/(shell)/settings/_components/sections/members/members.module.css'
 import type { useMembers } from '@/platform/embedded/lib/data/members'
 import { plural } from '@/platform/shared/plural'
@@ -17,7 +18,7 @@ interface SeatsOverviewProps {
 
 export function SeatsOverview({ seats }: SeatsOverviewProps) {
   const organizationId = useOrganization().organization.id
-  if (seats.status === 'pending') return <LoadingRows label='Loading seats' rows={1} />
+  if (seats.status === 'pending') return <SectionSkeleton title='Seats' rows={1} />
   if (seats.status === 'error')
     return (
       <FailureNotice