Show placeholder while MAP player is loading

[RichardPK]

PRs :

✅ 1. Add dark mode version of BBC_BLOCKS . BBC-archive/psammead#3610
✅ 2. Implement dark mode for psammead-image-placeholder BBC-archive/psammead#3611
✅ 3. Implement image placeholder in psammead-media-player. BBC-archive/psammead#3600
4. Simorgh PR #7350

Is your feature request related to a problem? Please describe.

Right now on our media pages we display an empty white space while we wait for the player to load.

We think we can improve the experience by giving some feedback to the user in the form of a loading state as they wait for the player to load and thus increase the perceived performance of the page.

There is a detailed writeup of the motivation for this, here:

Our current load-in flow to be improved:

We think a revised loading sequence could be:

1. Grey / loading placeholder **on first page load
2. Poster Image - on lazy load
3. Player fully loads

Measuring the impact:

We expect to test this improvement by measuring:

1. the bounce-rate of the pages (we expect the bouncerate to reduce on media pages)
2. the playcount
3. We also expect our lighthouse performances scores to improve

Describe the solution you'd like

There is already a Psammead placeholder component for this: https://bbc.github.io/psammead/?path=/story/components-images-imageplaceholder--16x9-image-placeholder

As we are defining how we solve this, we are slightly freer to create our own acceptance criteria.

Acceptance Criteria:

• As this is an experiment - we are limiting the scope to only apply to the MAP player
• Where the page supports Cinema mode we will use the darker version of the psammead placeholder
• For standard pages we will use the light grey version of the psammead placeholder
• Must work on both canonical and amp pages
• We will update the designs / colours for the psammead placeholder image: https://bbc.github.io/psammead/?path=/story/components-images-imageplaceholder--16x9-image-placeholder

Designs:

https://app.zeplin.io/project/5d4d77b1fcbfc79bf47e0294/dashboard?seid=5ef47c75b611fe6900223b47

400px Cinema mode: https://zpl.io/boqvJ8X

1008px Cinema mode: https://zpl.io/bWoeGjP

a11y Acceptance Criteria:

As a div with a background image, Psammead Image Placeholder is a presentational element without semantic meaning. As such it does not need to meet colour contrast requirements.

See: https://paper.dropbox.com/doc/WS-Changes-to-placeholder-image--A3T0sivfJ9Rhr0JqUtSWUZiYAQ-Vp1MVW3uSq6jut9xErBbw

Technical investigation:

Broadly speaking, there are two approaches for adding a loading placeholder while only accessing the outer iframe

1. Use state and the iFrame's onLoad event to conditionally render the ImagePlaceholder, or animate it away
2. Use the player's z-index to place it on top of the ImagePlaceholder when it loads in, obscuring the loading screen.

• This early experiment suggests a thorough 'loading' state integration, would require communing 🙏 with SMP directly via Morph, or removing the iFrame on canonical. There is, however, an easy win we can try out in approach 2.

Approach 1:

A. Using onLoad to conditionally render the component, without animation
Initial video comparing the two different states. With the loading component on the left, without it on the right: https://www.loom.com/share/ebca1fccceaa4e0e828c824b91cb8cb9

• It appears that this approach is adding around 1s to the component load time. Notice the component without the loading screen is refreshed second, but finishes first.
• There is still a flash of white after the iFrame has loaded & the loading screen is no longer rendered (icky).
• Slightly unscientific as this is loading in Storybook too, but the total network load times give us some indication of the impact on page speed:

Without onLoad state change

With onLoad state change

B. Using onLoad, plus animation ✨ 😮
The onLoad state triggers a transition, making the loading screen fade out. Video: https://www.loom.com/share/db26658d0a854f9e987a3ea86c44618d

• As before this approach adds about 1s to the page load time.
• The SMP 'pop-in' is masked by the animation only firing once it's fully loaded, but:
• As the onLoad func on the outer iframe triggers before SMP is ready to be clicked, I had to manually add a time delay to the animation... of 1.6s. 🤢
• This is essentially adding visual fidelity at the expense of performance. x

Approach 2 (I'd advocate for this ✅ ):

Use z-index to place media player on top of loading placeholder - once it's loaded, the placeholder is masked.
Video: https://www.loom.com/share/8e4113a230cb45ac80c9523742eda85b

• No impact on load times
• Does successfully paint the previously white space with placeholder while SMP is still loading in.
• Minor pop-in from SMP
• This is an easy-win, to test impact on lighthouse, bounce rates & playcounts

To see this locally:

• Run storybook locally in psammead
• Visit http://localhost:8180/?path=/story/components-media-player--map-default
• Notice grey placeholder loading before video