Spin while the parameter index loads

app/src/components/flagship/ParameterTreeBrowser.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { IconChevronDown, IconChevronRight, IconPlus } from '@tabler/icons-react';
-import { Text } from '@/components/ui';
+import { Spinner, Text } from '@/components/ui';
 import { colors, spacing, typography } from '@/designTokens';
 import { ParameterTreeNode } from '@/types/metadata';
 
@@ -57,9 +57,12 @@ export default function ParameterTreeBrowser({
 
   if (!tree) {
     return (
-      <Text style={{ fontSize: typography.fontSize.sm, color: colors.text.secondary }}>
-        Loading the policy tree…
-      </Text>
+      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
+        <Spinner size="sm" />
+        <Text style={{ fontSize: typography.fontSize.sm, color: colors.text.secondary }}>
+          Loading the policy tree…
+        </Text>
+      </div>
     );
   }
 

app/src/pages/flagship/Build.page.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import ParameterSearchBox from '@/components/flagship/ParameterSearchBox';
 import ParameterTreeBrowser from '@/components/flagship/ParameterTreeBrowser';
 import WorkspaceLayout from '@/components/flagship/WorkspaceLayout';
-import { Button, Stack, Text, Title } from '@/components/ui';
+import { Button, Spinner, Stack, Text, Title } from '@/components/ui';
 import { colors, spacing, typography } from '@/designTokens';
 import { useCurrentCountry } from '@/hooks/useCurrentCountry';
 import { addDraftProvision, provisionFromSearchEntry, useDraftReform } from '@/libs/draftReform';
@@ -96,15 +96,22 @@ export default function BuildPage() {
               }}
             />
           ) : (
-            <Text
+            // The index takes a moment on the US tree — say so with
+            // something moving, so the wait reads as work rather than
+            // an empty page.
+            <Stack
               style={{
-                color: colors.text.secondary,
-                fontSize: typography.fontSize.sm,
-                textAlign: 'center',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: spacing.sm,
               }}
             >
-              Loading the parameter index…
-            </Text>
+              <Spinner size="sm" />
+              <Text style={{ color: colors.text.secondary, fontSize: typography.fontSize.sm }}>
+                Loading the parameter index…
+              </Text>
+            </Stack>
           )}
 
           <div style={{ display: 'flex', justifyContent: 'center' }}>

app/src/tests/unit/pages/flagship/Build.test.tsx

@@ -35,4 +35,14 @@ describe('BuildPage', () => {
 
     expect(screen.queryByText(/loading the policy tree/i)).not.toBeInTheDocument();
   });
+
+  test('given the parameter index has not loaded then a spinner stands in for the search box', () => {
+    // Given / When — the store starts empty, as it does on a cold load
+    render(<BuildPage />);
+
+    // Then
+    expect(screen.getByText(/loading the parameter index/i)).toBeInTheDocument();
+    expect(screen.getAllByRole('status').length).toBeGreaterThan(0);
+    expect(screen.queryByRole('combobox', { name: /search parameters/i })).not.toBeInTheDocument();
+  });
 });

changelog_entry.yaml

@@ -1,3 +1 @@
-- Name states in the parameter search filter, explain the contributed filter, and stop long parameter values from squeezing result labels
-- Lead the build page with search, fold the policy tree behind a toggle, and open a search result's folder in the tree
-- Let the draft reform panel fold away
+- Show a spinner while the parameter index and policy tree load on the build page