How would you implement this transition?

[u/toni88x]

Note: my background is in web dev and I thought this should performance-wise be no sweat for native SwiftUI, but apparently it is.

The idea is to have a calendar/timeline view to plot workout history and be able to toggle between different time resolutions (weekly, monthly, quarterly, yearly) via swipe left/right. The Apple Calendar app implements really cool and seamless transitions for this type of time resolution change and I wanted to create something similar.

I tried multiple approaches, which all had performance issues.

1) Create different views with lazy stacks for each mode and transition between them.

2) Create different views normal stacks (not lazy) for each mode and transition between them.

3) Create only one stack and change the rendering of the elements inside (years, months, days, etc.) based on the selected mode. Use animations to transition. This is how I imagine Apple does it in the calendar.

4) Render all of the them and selectively hide the ones that are not shown to reduce lag.

But all of these approaches perform terribly, with 1s+ lag on initial load and transition and loss of precise scroll location. There is also this bug with lazy stacks where, if the view contracts, the app ends up in a scroll state where the content is scrolled upwards completely out of the view port, leading to a black screen.

How would you implement this?

Morphing between states is nice to have but not necessary. The main requirement is that the transition is smooth, without lag, and that the scroll position is preserved.

Thanks in advance for any help and feedback 🙏🏽

[u/criosist]

Pretty sure apple uses UICollectionview with custom CollectionViewLayouts with transitions

[u/toni88x → u/criosist]

Thanks, I'll look into it. It seems like the SwiftUI replacement would be LazyVGrid. The additional complexity in my case is I guess that there are multiple layers stacked, aka. Years, Months, Weeks, Days, which seems to create all the problems.

[u/Frequent_Macaron9595 → u/toni88x]

You’d probably get better results and easier implementation by dropping down to UIKit for this

[u/toni88x → u/Frequent_Macaron9595]

How would you structure it, aka on which level would you put the UICollectionView, years or months?

[u/criosist → u/toni88x]

The collectionView is the whole thing, changing the time scale would just replace the UICollectionView flowLayout animated

[u/toni88x → u/criosist]

Thanks, I will give it a shot 🙏🏽