[BUG] Data flickering on screen change

[nvllz]

Please confirm the following

• [X] I checked the current issues for duplicate problems

Describe the bug

When starting the app or switching screens, the app displays the default values for a friction of a second (as if it is recomposing each time in a very bad looking way), and only then updates them to real values.

It looks really bad, I wonder if there is a way to make screen navigation not trigger such flickering with default values for 10ms before the actual data is loaded.

To Reproduce

You can notice it when starting the app, going through screens and opening dialogs.

Expected behavior

I'm not sure what causes this behavior, but sometimes the screens seem to show the actual data without flickering as if it was properly cached. I expect the app to work smoothly, so it does not show '0.00' for a small friction of a second, but the actual value from the very first moment the screen is loaded. The same goes for entries in the Accounts screen, which tend to show a different background color for a very short time before changing to the actual one, which should also be fixed.

Screenshots

Some of the screen recordings

https://github.com/Ivy-Apps/ivy-wallet/assets/110673332/ecd73119-b3a7-47c2-8a5a-248e64ab4073

https://github.com/Ivy-Apps/ivy-wallet/assets/110673332/ea963559-25d4-4801-bec5-986b2a8700a4

https://github.com/Ivy-Apps/ivy-wallet/assets/110673332/7e4186dc-ca6c-48e7-8b59-b8aa60242d5f

https://github.com/Ivy-Apps/ivy-wallet/assets/110673332/2e72091f-cd1b-402d-b887-8ef720d90c94

Focus on the first few frames each time I changed a screen or opened a dialog.

Smartphone

Galaxy s20+

Additional context

Does not seem to be related to a specific device, works the same way in the latest stable release build.

[ivywallet]

Thank you @nvllz for raising Issue #2958! 🚀 What's next? Read our Contribution Guidelines 📚.

Tagging @ILIYANGERMANOV for review & approval 👀

[ILIYANGERMANOV]

Hey @nvllz thanks for raising! This is caused by our inefficient algorithm that calculates the balance. We sum all transactions which gets inefficient when you use the app for a long time.To fix it we need to cache the balance of each account and sum only the transactions after the cached date

[nvllz]

Hi Iliyan! I mean it's not just about balances, as you can see it works the same way when you tap a tab in the accounts screen. The app shows the default color for a very short time and then updates the default values in front of your eyes. This is what I think looks bad, and I'm worried it's just how the app is supposed to work, idk. I just tried with a fresh start and it gets the same no matter the amount of data. I don't know if there is a way to load it as it is supposed to look like in the background and present the user with the end state only for each screen in the app. Just don't load things dynamically if possible, or make it smoother if necessary. I hope you understand it better now.

[ILIYANGERMANOV]

That's caused by the balance (it's the bottleneck). All things are load sequentially and until the balance loads successfully the Uinstate with the initial (default) values stays. We need to fix the balance calculation and also consider calculating stuff in parallel but the main thing is to fix the balance. If we calculate it efficiently everything will be instant like in the 2023 rewrite branch

[nvllz]

I've been thinking about it and I don't think you're getting my point. It's about these visual glitches that have been present since I started using the app.

Focus on the video below. Here you can see how the bar turns red with a value of 0.00 for a very short time before collapsing. The moment I tapped the button to hide this dialog, it went back to the default value (0.00) just before it collapsed. It's a bad experience for me, and the app now lacks fluidity in too many screens.

https://github.com/Ivy-Apps/ivy-wallet/assets/110673332/fbe1e7e1-1233-4a5f-9b83-77bd7a8c2b31

All the dialog should do is collapse with the value it presents. Instead, it loads 0.00 for a split second (making the progress bar red) and then collapses. And it's not just this dialog, because all the videos in the original post mention this kind of flickering. It looks like instead of loading the final data on tap, Ivy shows some kind of placeholder and only when it gets data from the database, it changes the placeholder values, colors, etc. to match the desired output. But it should present the user with the final output, so there's no this kind of flickering on the fly. Idk how to describe it better as I'm not a developer. Just open any other kind of a M3 app and swich cards, open some dialogs and compare it.

Idk if you understand it now, but it just looks bad.

[ILIYANGERMANOV]

@nvllz thanks for providing more context! The dialogs in Ivy Wallet are fcked up and need to be reworked

[ILIYANGERMANOV]

Isn't the same issue present in the Google Play version?

[nvllz]

Yes, it is the same there.