Minor stutter when first opening a collection

[maxzorzetti]

Describe the bug:

When you first tap on a collection, the transition animation is briefly sluggish.
Tested on an iPhone 6S.

Steps to Reproduce:

1. Install the app
2. Open the app
3. Navigate to Collections screen
4. Tap a collection for the first time

Expected Result:

The selected collection screen opens with a smooth transition animation.

Actual Result:

The selected collection screen opens with a low-framerate transition animation.

App Version:

The current version on the App Store, as of 23-07-2021.

[matuella]

Thanks for opening the issue @maxzorzetti!

This is probably due to some Flutter limitations right now, like when the app initializes for the first time - imagine something like loading shaders in games, but we don't have a "loading screen" because, well, it's an app. Reference here

Nonetheless, thanks again for opening it, it's something that affects our application's experience and we can very likely find a workaround, but we will have to look into it.

Edit: May also not be directly related to iOS jank, given the following Android's reviews:

Screenshots

[ggirotto]

This is definitely a Flutter shader junk performance issue.

The animations junks problemas with Flutter seem not to be related only with iOS platform, as stated in Flutter Reduce shader compilation jank on mobile docs:

For best results, capture SkSL shaders on actual Android and iOS devices separately.

I've made some tests using SKSL Warmup proposed in this article and it reduces the animations stutter considerably, although it doesn't solve the problem.

Since this is a Flutter SDK issue, we don't have much control over it. The best that we can do is to use SKSL Warmup while we wait for a long-term solution from Flutter team, which is currently in development.

A few downsides of using the warmup:

• The size of the deployed app is larger because it contains the bundled shaders.
• App startup latency is longer because the bundled shaders need to be precompiled.
• We will need to use Flutter beta channel to release the app in the release workflow, since this feature is not available in the stable branch yet.

What do you think @matuella ?

[matuella]

I think there could be workarounds for handling these shaders pre-warmup "manually", like calling these janky animations while still displaying a splash screen, although the effort necessary would be non-trivial.

My guess is that there is around a full month ahead of us until this is on stable, although I see no issues with using beta until it lands on stable.

@ggirotto could you give an estimate of how long the latency increases the application startup and how big is the increase of our application size?

[ggirotto]

@matuella

• Application size grow is not significant because we have few animations and navigations (less than 1MB).
• Application startup time is not noticeable due to the same aspects as above.

I'll proceed with these warmup changes in a dedicated PR.

[matuella]

This issue wasn't directly related to flutter jankiness, instead, it was due to a complex custom painter when painting a collection card. Attempted to solve it with other approaches (in #185), we will keep a close watch on this issue if any problems related to stutters and jankiness continues to appear.