Add a loading indicator to the preview iframe to improve user experience

Problem/Motivation

Currently, when the decoupled preview iframe loads when the user toggles between the "Draft" and "Published" versions, the iframe can appear as a blank white screen for a noticeable period, especially on slower connections or when loading heavy pages. This can lead to a poor user experience, as the user may not be sure if the content is loading or if something is broken.

Adding a visual indicator would provide clear feedback to the user that the system is working and content is being loaded.

Proposed resolution

Implement a simple, lightweight loading indicator that is displayed over the iframe while it is loading content.

The proposed solution involves:

1. Injecting minimal CSS into the page to create a centered, spinning loader icon and a semi-transparent overlay. This avoids the need for new CSS library dependencies.
2. Using JavaScript to show the loader when the iframe begins to load (both on initial page load and when the source URL is changed via the toggle).
3. Hiding the loader once the iframe's load event has fired, indicating the content is ready.

This provides immediate visual feedback and improves the perceived performance of the preview functionality.

User interface changes

• A semi-transparent overlay will cover the iframe area while content is loading.
• A centered, spinning loader icon will be displayed on top of the overlay.
• This indicator will disappear once the iframe content has finished loading.