Hello, I've encountered an issue where I'm seeing...

# compose

[Nepath]

Hello,

I've encountered an issue where I'm seeing janky frames and unsmooth transitions when navigating from Screen A to Screen B with a 300ms horizontal slide LinearEasing animation. This issue becomes more pronounced when:

1. I add a Crossfade for the state change.
2. The screen complexity increases.
3. Navigation buttons have a ripple effect.

Here's a link to a sample project and some videos I've created to demonstrate the issue: [Sample Project](https://issuetracker.google.com/issues/301488789). However, as this is a P4 issue, I'm not expecting a quick response. Also, please note that the lag isn't as visible in this sample project due to its simplicity, but it's still present.

In more complex screens, I've even noticed this issue on my Samsung S22. Here are some technical details about my project:

- I run the project with R8, in release mode.
- I'm using Material3.
- All the libraries I'm using are up to date.
- I've checked the layout inspector and there are no recompositions during the animation.
- I'm using stable annotated classes and ImmutableList for lists.
- For navigation, I'm using Voyager, but I've also checked with Appyx, fragment navigation, and Slack Circuit, and the issue persists.
- I'm using Koin for DI, but the issue persists even in the sample project where I'm not using any DI.
- I'm using the Orbit MVI library for MVI architecture, but the issue persists even in the sample project where I'm not using it.
- I've moved all unnecessary calculations out of composables.

Interestingly, I've noticed occasional janky frames on simpler screens on slower devices like the Xiaomi POCO x3 or Samsung A20S. However, when I run the Maxi Zoo application from the store, which is fully built in Compose, I don't see any janky frames, even with more complex screens and a ripple effect. This leads me to believe that I might need to add something to my Gradle file or elsewhere, but I can't figure out what it is. Any help would be greatly appreciated.

[Sergey Y.]

Have you tried profiling your code? Android Studio provides plenty of tools to trace performance issues, including CPU method tracking, system trace, etc.

For more information:
https://developer.android.com/jetpack/compose/performance/bestpractices

https://youtu.be/Z96wfbID_Yc?si=Ap7j_p-K1nRlL5FX▾

[Nepath]

Thank you for your response. I will begin implementing some of these tips immediately, but I still have a few uncertainties. For instance, at the start of the "Enhancing Jetpack Compose App Performance" video, it is mentioned that "if you don't enable R8, release mode, etc., please start there, as you might not have a performance problem at all". This implies that for relatively simple applications, additional effort might not be necessary. However, I have a sample app that is a straightforward project, but it is experiencing janky frames.

"My second question pertains to the baseline profile. From my understanding, it only aids in improving the performance when a screen is loaded for the first time. However, in my case, the issue is persistent and occurs every time, not just on the initial load. Would the baseline profile still be beneficial in this scenario?"

[Sergey Y.]

Don't focus on the baseline profile for now, as the advice in the video is general and meant for most cases. What you need to do now is figure out why your layout is rendering too slowly. There could be several reasons: a lot of work being done on the main thread, slow code is just slow code, R8 won't help, too much graphics (large resolution images or complex vector graphics) that slow down rendering, or excessive recompositions due to unstable arguments in composable functions. CPU method tracing will help find those slow functions that may take a long time to execute on the main thread. System trace will show the overall picture with frame drops, and you can also connect androidx trace, which will complement the report with data on the execution of all composable functions in your layout.

[Nepath]

I've been experimenting with the profiler, and this is how I interpret the results:
• The tag "slide transition my state" refers to the slide transition of Voyager.
• "Whole screen" refers to the screen I'm navigating to.
• "Success screen" is a tag that appears when content loads successfully.
Since I'm still gaining experience, please correct me if I'm mistaken. It seems that there is no issue with the composables inside the screen since they are loading quite rapidly. In some cases, they don't seem to contribute to the janky frame issue. So, the problem must lie elsewhere. However, this raises more questions, such as how is this possible? But if so, I will further investigate this issue.

[ferdialif02]

I think I have seen your post on stackoverflow and google issue tracker, I too have janky frames while navigating between page in horizontal pager, and after disabling ripple effect, the laginess is gone. I have updated the ripple effect to the newest version using CustomRipple or something for my custom ripple and the issue still persist. Btw my phone is Redmi note 9 Pro with Snapdragon 720G. I am running Jetpack Compose 1.7.0