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