Add loader if center value hasn't rendered

[codemist]

References:

Jira: MNTOR-3154

Description

Screenshot (if applicable)

Screen.Recording.2024-05-14.at.4.57.18.PM.mov

How to test

Checklist (Definition of Done)

• Localization strings (if needed) have been added.
• Commits in this PR are minimal and have descriptive commit messages.
• I've added or updated the relevant sections in readme and/or code comments
• I've added a unit test to test for potential regressions of this bug.
• Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
• All acceptance criteria are met.
• Jira ticket has been updated (if needed) to match changes made during the development process.
• Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.

[Vinnl]

I got nerd-sniped into trying to find out why the colours wouldn't show up, and found out that it's because our Content Security Policy doesn't allow defining styles via the style attribute. One potential solution is to widen our CSP policy, which I've submitted a PR for here: #4531

I'm not sure I'm able to reproduce what the issue is with the center value, but possibly that PR also solves that?

[github-actions]

Preview URL 🚀 : https://blurts-server-pr-4512-mgjlpikfea-uk.a.run.app

[Vinnl]

Thanks for picking this up, I think the addition of a loader makes sense. I did spend a bit of effort trying to understand what went wrong, which I've detailed inline - I think there's a small change we can make that then enables not suppressing the test error, but outright avoiding it.

And if you don't mind, could you add a story for the loader? Curious to see what the two different versions look like, which is a bit of a hassle to test now :)

(Oh, and apologies for the delayed review, I got a bit buried in messages.)

[Vinnl]

OK, so I think I figured out why the center value isn't available on page load: it is rendered by a getFragment, which replaces <tags> in a string with actual HTML tags. However, to do this safely (i.e. to avoid code injection from variables), it uses browser APIs to instantiate DOM elements for those actual tags - and those APIs aren't available during pre-rendering. This is why getFragment only renders on the client-side.

So the loading animation while we await the client-side render sounds like a good idea. However, it should be sufficient to use the useHasRenderedClientSide hook to determine whether to show it, rather than have the effect dependent on props.data, nrText and labelText. Also, we can add a comment describing the above to explain why we have it :)

And then with #4551, you should be able to avoid the test from erroring by adding a jest.mock call for the useHasRenderedClientSide hook.

[github-actions]

Preview URL 🚀 : https://blurts-server-pr-4512-mgjlpikfea-uk.a.run.app