Unwanted animation effect with .navigationBarHidden(true)

Question

I have a simple loading view on SwiftUI.

When I am displaying this loading screen with .navigationBarHidden(true) on NavigationView. There is an issue that animation has an unwanted effect on it.

This is my loading animation

    struct LoaderThreeDot: View {
        var size: CGFloat = 20
        @State private var shouldAnimate = false
        var body: some View {
            HStack(alignment: .center) {
                Circle()
                    .fill(Color.blue)
                    .scaleEffect(shouldAnimate ? 1.0 : 0.5, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.5).repeatForever())
                    .frame(width: size, height: size)
                Circle()
                    .fill(Color.blue)
                    .scaleEffect(shouldAnimate ? 1.0 : 0.5, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.3))
                    .frame(width: size, height: size, alignment: .center)
                Circle()
                    .fill(Color.blue)
                    .scaleEffect(shouldAnimate ? 1.0 : 0.5, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.6))
                    .frame(width: size, height: size, alignment: .center)
            }
            .onAppear {
                self.shouldAnimate = true
            }
        }
    }

LoadingView as follow:

struct LoadingView<Content>: View where Content: View {
    let title: String
    var content: () -> Content
    @State var showLoader = false
    var body: some View {
        ZStack {
            self.content()
                .disabled(true)
                .blur(radius: 3)
            
            Rectangle()
                .foregroundColor(Color.black.opacity(0.4))
                .ignoresSafeArea()

            VStack {
                if showLoader {
                    LoaderThreeDot()
                }
                
                Text(title)
                    .foregroundColor(.black)
                    .font(.body)
                    .padding(.top, 10)
            }
            .padding(.all, 60)
            .background(backgroundView)
        }
        .onAppear {
            showLoader.toggle()
        }
    }
    
    private var backgroundView: some View {
        RoundedRectangle(cornerRadius: 12)
           .foregroundColor(Color.white)
           .shadow(radius: 10)
    }
}

And simply presenting it as follow:

NavigationView {
    ZStack {
        LoadingView(title: "Loading...") {
            Rectangle()
                .foregroundColor(.red)
        }
    }
    .navigationBarHidden(true)
}

If I remove .navigationBarHidden(true) animation looks ok. So I am guessing that the animation effect started when the navigation bar was shown and it somehow affecting the animation after the navigation bar is hidden.

Is there any way I can avoid this?

Answer 1

Change your toggle on the main thered.

// Other code
.onAppear() {
    DispatchQueue.main.async { //<--- Here
        showLoader.toggle()
    }
}
// Other code