Laggy scroll when using custom day view in `CalendarViewRepresentable`

[kevalkorat]

CalendarView's scroll doesn't seem smooth when adding a custom day view. Currently trying to use this calendar for a fitness app I am making where I want to show the yearly view of the calendar along with some data for each day. I have also tried to split the CalendarDayView even further but that didn't solve the scroll issue.

This is my setup and you can run on device and see the performance issue. Scroll is just not silky smooth and seems janky.

Can someone help to see if I am doing something wrong here and maybe fixing that can improve the scroll. Any help is greatly appreciated. @bryankeller

struct HorizonCalendarView: View {
    let startDate = Calendar.current.date(from: DateComponents(year: 2020, month: 01, day: 01))!
    let endDate = Date.now

    var body: some View {
        CalendarViewRepresentable(
            visibleDateRange: startDate...endDate,
            monthsLayout: .vertical,
            dataDependency: nil)

        .verticalDayMargin(4)
        .dayAspectRatio(1.25)
        .interMonthSpacing(30)
        .dayOfWeekAspectRatio(0.5)
        .monthDayInsets(.init(EdgeInsets(top: -20, leading: 0, bottom: 0, trailing: 0)))

        .dayOfWeekHeaders({ month, weekdayIndex in
            EmptyView()
        })

        .dayItemProvider { day in
            CalendarDayView(dayNumber: day.day, isSelected: false, reps: 100)
            .calendarItemModel
        }
    }
}

struct CalendarDayView: View {
    let dayNumber: Int
    let isSelected: Bool
    var reps: Int?

    var repsString: String {
        guard let reps else {
            return "0"
        }
        return "\(reps)"
    }

    var dayTextColor: Color {
        isSelected ?
            .primary : .init(uiColor: .tertiaryLabel)
    }

    var repsTextColor: Color {
        switch reps {
        case .none: return .gray.opacity(0.15)
        case .some: return Color(uiColor: .systemBackground)
        }
    }

    var body: some View {
            VStack(spacing: 0) {
                Text("\(dayNumber)")
                    .foregroundStyle(dayTextColor)
                    .padding(.init(top: 4, leading: 7, bottom: 4, trailing: 7))
                    .frame(maxWidth: .infinity)
                    .font(.caption)

                Text(repsString)
                    .foregroundStyle(repsTextColor)
                    .minimumScaleFactor(0.7)
                    .font(.headline)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .lineLimit(1)
                    .padding(.horizontal, 5)
                    .background {
                        if let _ = reps {
                            Color.clear
                                .background(.green.gradient)
                        }
                    }
                    .clipShape(.circle)
                    .frame(maxWidth: 40)
            }
            .frame(maxHeight: .infinity, alignment: .top)
    }
}

Also, attaching a brief video of how it looks like in action. Focus on the green circles and you can see how they scroll. But running this on device can show the issue more clearly.

https://github.com/airbnb/HorizonCalendar/assets/56408201/c6ed021a-9aac-4640-8612-275baa07f520

[PentaTea]

same problem.