SwiftUI: Transparent NavBar in 3 Column Layout on iPhone - ios

Question

I have a 3 column layout and for some reason, the navigation bar in the middle column starts off buggy on the initial launch of the app, ie transparent and unresponsive. I have to navigate away and back in order for the navigation bar to function properly. This only happens when I run it on the iPhone simulator, iPad works fine.
Code:
struct ContentView: View {
var body: some View {
NavigationView {
Sidebar()
MainView()
Text("Select mail to read")
}
}
}
struct Sidebar: View {
var body: some View {
List {
Section(header: Text("Browse")
) {
NavigationLink(destination: MainView()) {
Text("Inbox")
}
NavigationLink(destination: SentView()) {
Text("Sent")
}
}
}
.listStyle(SidebarListStyle())
.navigationTitle("Mailboxes")
}
}
struct MainView: View {
#StateObject private var viewModel = ViewModel()
var body: some View {
Group {
if viewModel.isFetching {
ProgressView()
} else {
List {
ForEach(0..<20) { i in
NavigationLink(
destination: DetailView(item: "\(i)"),
label: {
Text("Inbox \(i)")
})
}
}
}
}
.navigationTitle("Inbox")
.listStyle(PlainListStyle())
}
}
struct SentView: View {
var body: some View {
List {
ForEach(0..<5) { i in
NavigationLink(
destination: DetailView(item: "\(i)"),
label: {
Text("Sent \(i)")
})
}
}
.navigationTitle("Sent")
.listStyle(PlainListStyle())
}
}
class ViewModel: ObservableObject {
#Published var isFetching = false
init() {
fetchData()
}
func fetchData() {
isFetching = true
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
self.isFetching = false
}
}
}
When running on iPhone:
When running on iPad:
EDIT:
Replaced code and gif with a more generic implementation for brevity.