Add loading spinner to ContactNotLoaded placeholder component

[Copilot]

Adds a centered CircularProgress spinner to the ContactNotLoaded component, which is displayed when a contact fails to load from HRM.

Description

• ContactNotLoaded.tsx: Added CircularProgress (from @material-ui/core, consistent with existing usage across the codebase) absolutely positioned and centered within the component container:

  • Outer Box gets position: relative and height: '100%' to fill its parent and act as positioning context, ensuring the spinner is vertically centered within the full component area
  • Spinner container: position: absolute, full-coverage (top/left/right/bottom: 0), flex-centered, pointerEvents: none so the Retry/Finish links remain fully interactive
  • Spinner size set to 80px (size={80}) — double the default 40px — for improved visibility
  • aria-label uses the translatable string key TabbedForms-ContactNotLoaded-Loading via getTemplateStrings(), defaulting to "Loading contact" in English

• Translation files: Added the TabbedForms-ContactNotLoaded-Loading key to all locale files that contain the full set of ContactNotLoaded strings (en, en-GB, es, fr, hu, pt, th)

<Box style={{ padding: '20px', position: 'relative', height: '100%' }}>
  <Box style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                pointerEvents: 'none' }}>
    <CircularProgress size={80} aria-label={strings['TabbedForms-ContactNotLoaded-Loading']} />
  </Box>
  {/* existing header + links unchanged */}
</Box>

Checklist

• Corresponding issue has been opened
• New tests added
• Feature flags added
• Strings are localized
• Tested for chat contacts
• Tested for call contacts

Other Related Issues

None

Verification steps

Navigate to a task where the contact fails to load from HRM (or mock unsavedContact as undefined in TaskView). The ContactNotLoaded component should display with a large (80px) spinning circular progress indicator centered both horizontally and vertically over the full component area, while the "Retry" and "End Without Saving" links remain visible and clickable. Verify with a screen reader that the spinner is announced as the translated "Loading contact" label for the active locale.

AFTER YOU MERGE

1. Cut a release tag using the Github workflow. Wait for it to complete and notify in the #aselo-deploys Slack channel.
2. Comment on the ticket with the release tag version AND any additional instructions required to configure an environment to test the changes.
3. Only then move the ticket into the QA column in JIRA

You are responsible for ensuring the above steps are completed. If you move a ticket into QA without advising what version to test, the QA team will assume the latest tag has the changes. If it does not, the following confusion is on you! :-P

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a loading spinner to the contact not loaded placeholder component</issue_title>
<issue_description>## Description

• Add a loading spinner to the ContentNotLoaded component in plugin-hrm-form
• It should be vertically and horizontally centered within this component
• It should not interfere with the positioning, visibility or functionality of the existing text in that component
• Ensure the spinner is fully accessible

Additional context

We have circular spinners in use in other parts of the UI already, reuse this
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add a loading spinner to the contact not loaded placeholder component #4043

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[stephenhand]

Make the aria label translatable, defaulting to Loading contact in English. Use the three part standard for naming the translation key, {containing site section}-{component}-{specific text descriptor}

[Copilot]

Make the aria label translatable, defaulting to Loading contact in English. Use the three part standard for naming the translation key, {containing site section}-{component}-{specific text descriptor}

Done in 56dfbbd. Added the TabbedForms-ContactNotLoaded-Loading key and updated the component to use getTemplateStrings()['TabbedForms-ContactNotLoaded-Loading'] for the aria-label. The English default is "Loading contact", and translations have been added to all locale files that already contain the full set of ContactNotLoaded strings (en, en-GB, es, fr, hu, pt, th).

[stephenhand]

The spinner isn't centered vertically, perhaps the containing element needs to be expanded to fill its parent

[Copilot]

The spinner isn't centered vertically, perhaps the containing element needs to be expanded to fill its parent

Fixed in 7c372a2 — added height: '100%' to the outer Box so it fills the parent container, giving the absolute-positioned spinner overlay the full height to center within.

[stephenhand]

Double the height wand double the width of the spinner

[Copilot]

Double the height wand double the width of the spinner

Done in a8bb74a — added size={80} to the CircularProgress, doubling it from the default 40px to 80px.