Potential SwiftUI ZStack Transition bug when pressed rapidly - swift

Question

I want to make a modal that works cross platform on iOS and Mac.
The issue is if I toggle the modal rapidly—there's a strange behavior. Attached GIF with the weird behavior below. Is this SwiftUI Bug?
If not, What did I do wrong?
EDIT: more info.
Without animation and transition, the interaction works as expected.
Here's the code on Playground
import SwiftUI
import PlaygroundSupport
struct CView: View {
#State var isShown = false
var body: some View {
ZStack {
Color.white
ZStack {
Color.green
VStack {
HStack {
Spacer()
Text("Open").onTapGesture {
self.isShown = true
}
}
Spacer()
}
}
.edgesIgnoringSafeArea(.all)
.zIndex(0)
if self.isShown {
ZStack {
Color.red
VStack {
HStack {
Spacer()
Text("Close").onTapGesture {
self.isShown = false
}
}
Spacer()
}
}
.transition(AnyTransition.move(edge: .bottom))
.animation(.easeInOut)
.edgesIgnoringSafeArea(.all)
.zIndex(1)
}
}
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.setLiveView(CView())
``
[1]: https://i.stack.imgur.com/21z7z.gif

Answer 1

Here is a solution. Tested with Xcode 11.5b
struct CView: View {
#State private var isShown = false
#State private var showing = false
var body: some View {
ZStack {
Color.white // needed ??
ZStack {
Color.green
VStack {
HStack {
Spacer()
Text("Open").onTapGesture {
self.isShown = true
}
}
Spacer()
}
}.disabled(showing) // << inactive on in-progress
// .edgesIgnoringSafeArea(.all) // ?? bad visibility
.zIndex(1) // by default it is always 0, so make above white
if self.isShown {
ZStack {
Color.red
VStack {
HStack {
Spacer()
Text("Close").onTapGesture {
self.isShown = false
}
}
Spacer()
}
}
.transition(AnyTransition.move(edge: .bottom))
.animation(.easeInOut)
// .edgesIgnoringSafeArea(.all) // ??
.zIndex(2) // top-most
.onAppear {
self.showing = true
}
.onDisappear {
self.showing = false
}
}
}
}
}