Is there a way to have lazy pickers similar to a lazyvstack? - swift

Question

Currently, I have a popup menu that contains two wheel pickers. I have create a drag gesture to allow swiping the popup menu away. However, as I add more entries to the picker wheels, the drag gesture becomes more and more laggy. The animation is fluid if I remove one of the pickers, or if I have less entries. How can I keep the animation fluid while having a lot of entries in both pickers? I have tried using a drawingGroup, however it doesn't work with a picker. Is there something along the lines of lazy loading for pickers?
Here are the pickers on the popup:
GeometryReader { geo in
HStack(spacing: 0) {
Picker(selection: $selection1) {
ForEach(0 ..< array1.count) { index in
...
}
} label: {
}
.labelsHidden()
.pickerStyle(.wheel)
.frame(width: geo.size.width / 2)
.compositingGroup()
.clipped()
Picker(selection: $selection2) {
ForEach(0 ..< array2.count) { index in
...
}
} label: {
}
.labelsHidden()
.pickerStyle(.wheel)
.frame(width: geo.size.width / 2)
.compositingGroup()
.clipped()
}
}
Here is the popup menu containing the pickers:
VStack {
ZStack {
ZStack {
Color("whiteblack")
VStack {
Capsule()
.frame(width: 40, height: 5)
.foregroundColor(.gray)
.padding(.top, 5)
Spacer()
}
}
.gesture(DragGesture(minimumDistance: 0, coordinateSpace: .global)
.onChanged({ value in
let amt = prevDragHeight - value.translation.height
if slideOffset >= 0 {
slideOffset -= amt
}
if slideOffset < 0 {
slideOffset = 0
}
prevDragHeight = value.translation.height
})
.onEnded({ _ in
if slideOffset > 70 {
withAnimation(.interactiveSpring()) {
slideOffset = 0
isShowing = false
}
slideOffset = 0
} else {
withAnimation(.interactiveSpring()) {
slideOffset = 0
}
}
prevDragHeight = 0
})
)
DoublePicker()
}
}
.frame(height: 400)
.frame(maxWidth: .infinity)
.background(.white)
.cornerRadius(20)
.padding()
.padding(.bottom)
.offset(x: 0, y: slideOffset)
.transition(.move(edge: .bottom))