Gutenberg-mobile: [GlobalStep] iPad only - Page Template's load animation does not adapt to device orientation.

[wptester9845]

Description

While creating a new Site Page, the load animation to display the Page Templates will memorise the device's orientation the first time the user does it. Afterwards, if rotating the device to a different orientation, the load animation will still be the same.

Reproduction Rate

4/4 100%

Expected behavior

The Page Template's load animation should adapt to the current device's orientation.

Actual behavior

The Page Template's load animation memorises the device's orientation the first time the user opens it.

Steps to reproduce the behavior

Install WordPress 14.5 on an iPad.
Log in to a valid account.
Tap 'Site Pages' under 'Publish'.
Tap the '+' button on the top right hand side of the screen.
Hold the device on portrait mode.
Tap any of the templates available.
Tap 'Close' to return to the template selection screen.
Rotate the device to landscape mode.
Tap any of the templates available.
Observe the Page Template's load animation is still shown as if the device was in portrait mode.

Tested on the following

iPad Mini 2 (12.0.0)

Please see the attached video for more information

iPad page template landscape.zip

Submitted by:

Ricardo Silva

[designsimply]

Tested and confirmed using WPiOS 14.5.0.1 TestFlight beta on iPad Mini 4 (WiFi) (iPad5,1) iPadOS 13.3.1.

[geriux]

Tested and confirmed using WPiOS 14.5.0.1 TestFlight beta on iPad Mini 4 (WiFi) (iPad5,1) iPadOS 13.3.1.

I haven't been able to reproduce on the simulator, did you test on a real device @designsimply?

At first guess, I'd say the Modal is having issues adjusting its size while it's rendering the content within but I'd need to confirm. For what I see on the video after it opens then changes its size to adjust to the new dimension.

[designsimply]

I haven't been able to reproduce on the simulator, did you test on a real device @designsimply?

I did indeed. I always beta test on real devices whenever possible. If I do test in the simulator, I always make a note of it.

For what I see on the video after it opens then changes its size to adjust to the new dimension.

Exactly. The screen sort of re-jiggers in an awkward moment when the page template preview loads IF the device has rotated to a different orientation prior. Happy to entertain a low priority or wontfix on this one (another option could be to close for now with an ask to re-open if we get user reports about it) and I would like to get a prioritization decision from you or your team for this one.

[geriux]

Thanks for the details @designsimply!

I would like to get a prioritization decision from you or your team for this one.

What do you think @pinarol ? I'm pretty sure it's a performance issue with the modal animation while rendering the content. But we could investigate a bit more. Any thoughts about this issue's priority?

Thanks!

[pinarol]

@geriux I think this is worth investigating, but, if there's no easy way to fix it I prefer deferring this until we have the ideal version of BottomSheet. I don't want us to invest a lot into the current one since it'll be trashed after we have the ideal version.

[geriux]

I tried to reproduce this issue in different simulators but couldn't reproduce.

In my experience with modals that have a lot of content or that are rendering images within is that it affects the transition animation of it. So, in this case, it's affecting the adjusting of the container after the rotation of the device has changed.

One of the solutions would be to add a skeleton placeholder, to prevent rendering the content until the animation has ended, but it wouldn't make sense for this since the preview should show up right away.

I suggest waiting as you suggested @pinarol for the ideal version of BottomSheet.

[pinarol]

I tried with iPad Air(3rd generation) real device and I am not able to reproduce this problem. This is likely to be a performance issue.

Closing this one since we don't have any fix to apply to this currently. But let me know if you have any concerns.