add loading loader to wc loader

[cocomarine]

Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1295

Notes

• Another loader from editor-standalone appears in the middle of the page before editor-ui loader appears
• Added a Loader component that is similar to the one in standalone and used it to show loading in the same place with a similar style as standalone
• Also added a LoadFailed component
• When 'Try again' is clicked, it reloads the page.
• Briefly looked into coordinating editor-ui and standalone loaders but decided to take a simpler route for now.

Screenshots

• When in dark theme:

[Copilot]

Pull request overview

Adds a dedicated loading indicator for the web component loader flow, replacing the previous text-only loading message.

Changes:

• Introduces a new Loader React component and corresponding SCSS styling.
• Updates WebComponentLoader to render the new loader during the loading state.
• Adds a new i18n string for the loader text and includes loader styles in the internal stylesheet bundle.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/containers/WebComponentLoader.jsx	Swaps the loading-state UI from a translated <p> to the new Loader, and injects internal styles during loading.
src/components/Loader/Loader.jsx	Adds a new reusable loading indicator component with optional display + delay.
src/assets/stylesheets/Loader.scss	Defines loader visuals (animated braces + text) and dark-theme overrides.
src/assets/stylesheets/InternalStyles.scss	Includes Loader.scss in the internal styles bundle so it’s available in the WC context.
public/translations/en.json	Adds a new loadingStates.loading string used by the new loader.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[maxelkins]

I think this is an improvement on the current failed state 👍

Potential iteration (not required if you just wanna ship it)

What normally fixes this? Is it just a refresh? Could we have:

"Load failed. Try again"

• Try again triggers a refresh
• Load failed can be the normal text colour

[maxelkins]

@cocomarine Would make "Try again" the link colour (like on the homepage) and then lets get this in. We can take a look in detail when we have more time 👍

Thank you!

[DNR500]

I think it might need an ever so slight spacing adjustment to match the one in standalone

editor-standalone

editor-ui

Might also need change the text color when dark mode too?

Would be nice at some point to move this into the design system so we can more easily keep this consistent

[DNR500]

Dropped a comment on with some suggestions for smaller changes - but this is going to look a lot better. Thanks for this