swarm-ui: the job graph shows placeholder rows in the shape of a job tree while it loads

JobqGraph takes an optional loading element, so the dashboard keeps its text
and the swarm UI's jobs tab passes a placeholder built from the graph's own
node and row classes: a root with two children and a second root, with the
real indent and rail.

frontend/packages/shared/src/jobq-graph/JobqGraph.tsx

@@ -28,6 +28,7 @@
 // loader is `text` (for unrelated shadow-DOM components' CSS-as-string
 // needs), and that loader is global per call, not per-module.
 
+import type { ComponentChildren } from "preact";
 import { useState, useEffect, useCallback, useRef } from "preact/hooks";
 
 // Mirrors `hive_jobq_wire::StateSchema` verbatim (variant names, no
@@ -283,6 +284,9 @@ export interface JobqGraphProps {
   onUpdate?: (nodes: GraphNode[]) => void;
   onCancel?: (id: number) => void;
   refreshToken?: number;
+  /** What shows while the first answer loads. A host that has a placeholder in
+   * the shape of its graph passes it; the default is a line of text. */
+  loading?: ComponentChildren;
 }
 
 // `refreshToken` is not read anywhere in the body — its only job is to
@@ -295,6 +299,7 @@ export function JobqGraph({
   onUpdate,
   onCancel,
   refreshToken = 0,
+  loading,
 }: JobqGraphProps) {
   const [selectedStates, setSelectedStates] = useState<Set<NodeState>>(
     () => new Set(ALL_STATES.filter((s) => !DEFAULT_HIDDEN_STATES.has(s))),
@@ -344,7 +349,7 @@ export function JobqGraph({
         {error ? (
           <p class="jg-error-msg">fetch failed: {error}</p>
         ) : nodes === null ? (
-          <p class="jg-empty">loading…</p>
+          (loading ?? <p class="jg-empty">loading…</p>)
         ) : !nodes.length ? (
           <p class="jg-empty">empty</p>
         ) : (