mShots does not appear to render Mapbox embeds

It appears that mShots does not render Mapbox embeds. At first I thought this might be an issue with mShots not waiting long enough for JavaScript to complete executing, however we haven't managed to replicate the issue with other blocks. The hunch at the moment is that it's somehow particular to Mapbox and / or using ``.

It looks like this on the front end of a real site:

pbYkd9-2R-p2


Via mShots it doesn't appear to finish loading before the screenshot is taken:


https://s0.wordpress.com/mshots/v1/https://andysfakeblockpatternsourcesite.wordpress.com/2021/01/29/test-map-layout/

@simison suggested in https://github.com/Automattic/wp-calypso/pull/49101 that we might be able to adjust something in https://github.com/Automattic/mShots/blob/748a64f945265cce1786393e43c4e9b43236d2b9/lib/snapshot.js#L174 https://pptr.dev/#?product=Puppeteer&version=main&show=api-pagewaitfornavigationoptions

~It's likely that this issue will be a blocker for a screenshots-based page layout picker in Calypso.~ Since this currently only affects one kind of block, it may not be a blocker, but would be a good thing to find a fix for eventually.

Start with the reproduction URL and compare its normal front-end rendering with the mShots result. Read lib/snapshot.js around line 174 and the linked Puppeteer page-wait documentation, then investigate why the Mapbox embed is not ready when the screenshot is taken. Done means the supplied Mapbox page renders its completed map in the mShots thumbnail.

Written by the indexing model from the issue text.