Chief of Staff page needs a dimension-reserving loading skeleton

[atomantic]

Chief of Staff (client/src/pages/ChiefOfStaff.jsx ~line 646-651) still shows a centered BrailleSpinner on load instead of a dimension-reserving skeleton:

if (loading) {
  return (
    <div className="flex items-center justify-center h-64">
      <BrailleSpinner text="Loading" />
    </div>
  );
}

It was left out of the #2843 PageSkeleton rollout because it's a bespoke two-pane shell (lg:grid-cols-[320px_1fr] avatar panel + chat pane — see the render below the loading guard), not the list/detail shape PageSkeleton (client/src/components/ui/PageSkeleton.jsx) currently models (its layout prop only supports 'grid'/list-style bodies, confirmed by reading the component — no two-pane mode exists).

Fix shape

Either:

1. Add a two-pane layout="split" (or similar) mode to PageSkeleton — a fixed-width side panel skeleton (avatar-shaped placeholder) + a flexible chat-pane skeleton (message bubble placeholders) — reusable by any future two-pane view, or
2. Build a local CoSSkeleton component in client/src/pages/ChiefOfStaff.jsx (or a co-located file) that mirrors the real lg:grid-cols-[320px_1fr] layout so the loading state reserves the same dimensions as the loaded page (avoiding layout shift), following the collapsed-panel behavior (desktopPanelCollapsed) already handled in the loaded render.

Prefer option 1 if a second two-pane view is anticipated soon; otherwise option 2 keeps the change scoped to this page.

Migrated from PLAN.md by /do:replan --issues. Follow-up to #2843.