diff --git a/app/src/components/flagship/ParameterTreeBrowser.tsx b/app/src/components/flagship/ParameterTreeBrowser.tsx
index c4df0c27d..71d8eabf4 100644
--- a/app/src/components/flagship/ParameterTreeBrowser.tsx
+++ b/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 (
-
- Loading the policy tree…
-
+
+
+
+ Loading the policy tree…
+
+
);
}
diff --git a/app/src/pages/flagship/Build.page.tsx b/app/src/pages/flagship/Build.page.tsx
index 9445121d3..a11fd1cc0 100644
--- a/app/src/pages/flagship/Build.page.tsx
+++ b/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() {
}}
/>
) : (
-
- Loading the parameter index…
-
+
+
+ Loading the parameter index…
+
+
)}
diff --git a/app/src/tests/unit/pages/flagship/Build.test.tsx b/app/src/tests/unit/pages/flagship/Build.test.tsx
index a0af54d52..7c7b5bbd9 100644
--- a/app/src/tests/unit/pages/flagship/Build.test.tsx
+++ b/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();
+
+ // 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();
+ });
});
diff --git a/changelog_entry.yaml b/changelog_entry.yaml
index 7b103d1eb..126c65c37 100644
--- a/changelog_entry.yaml
+++ b/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