Page/Site design picker: Fixes flickering when changing the preview mode

[antonis]

Fixes #13952

Description

Fixes flickering when changing the preview mode in the Page and Site design pickers by accounting for the rendering delay before updating the webview loading state.

To test

Site Design Picker

1. Start the site creation flow (e.g. Choose site > Add button)
2. Select the Create WordPress.com site option
3. Select a design
4. Press Preview
5. Press the preview mode button at the top right of the screen
6. Verify that the current preview mode does not flash before the selected mode renders

Page Layout Picker

1. Press the Fab ➕ icon at the My Site screen
2. Choose Site Page
3. Select a layout
4. Press Preview
5. Press the preview mode button at the top right of the screen
6. Verify that the current preview mode does not flash before the selected mode renders

Before

before.mp4

After

after.mp4

Regression Notes

1. Potential unintended areas of impact
   N/A

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual testing and relied on existing tests (ModalLayoutPickerViewModelTest, HomePagePickerViewModelTest)

3. What automated tests I added (or what prevented me from doing so)
   The fix involves a UI improvement for which a stable test might not be possible

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading the APKs:

• Jetpack-pr-15943-build-118960.apk

• WordPress-pr-15943-build-118960.apk

[ovitrif]

Thank you for looking into this @antonis! 🙇

Site Design Picker

• When testing the fix I could still repro the issue first on business theme Leven in Site Design Picker (see preview)
• Then I tried on other theme categories (Professional, Highlights, Blog) and I could only repro it on: Professional & one Blog theme. It seems to be more common with multi-column layouts and on tablet & desktop previews.
• In my tests of the fix it was always the mobile preview flickering before the tablet or desktop preview renders.

Preview

repro_preview_leven.mov

Page Layout Picker

• Seems more stable (I retested on prod version 19.1.1 after noticing this, and there it's not)
• Only one time I noticed a brief flickering preview for tablet on a multi-column layout
• The only flicker I was able to repro more than once was in the rendering of the gallery page template, which got me thinking it's a different issue:

Preview

repro_gallery_flicker.mov

I also noticed that the issue reproduces more often on my device when recording the screen.

---

• Tested the fix on Samsung Galaxy S8+ (Android 9)
• Tested the issue on Samsung Galaxy S8+ (Android 9) (v19.1.1)

[ovitrif]

Sorry for toggling "🔴 request changes" on my initial review, what I meant was to request your feedback on the different approach proposed in the comment on LayoutPreviewFragment

The changes in this PR look good to me, since there's a noticeable improvement compared to how the previews worked before.

Please check if the suggested change removes the flickering entirely, as that would be very nice. It was the case when I tested on Friday, but I wasn't very thorough 🙂

[ovitrif]

Thank you @antonis for testing the suggested approach and optimising it further!

I tested the latest changes and confirm it's working like a charm on my testing device! 👍

From my side this PR is ready to be merged!