Glitch on animation expanding view SwiftUI

Question

I have a search bar view, when the view is Expanding, the magnifying glass will appear as a shadow. How can I remove this?

ToolbarItem(placement: .automatic) {
    HStack {
        if self.showSearchBar {
            HStack {
                Image(systemName: "magnifyingglass") // I think that here is the problem, I need to add some transition, or remove it?
                
                let mytxtfield = TextField("Search in menu", text: self.$txtSearch)
                if #available(iOS 15, *) {
                    mytxtfield.submitLabel(.search)
                    
                }

                Button {
                    self.txtSearch = ""
                    UIApplication.shared.endEditing()
                    withAnimation(.spring(response: 0.30, dampingFraction: 0.3, blendDuration: 0)){
                        self.showSearchBar.toggle()
                    }
                    
                } label: {
                    Image(systemName: "xmark")
                }
            }
            .padding(self.showSearchBar ? 10 : 0)
            .background(colorScheme == .dark ? Color(.secondarySystemBackground) : Color.white)
            .cornerRadius(20)
            .frame(width: 320, height: 45)
            .transition(.move(edge: .trailing))
            
        } else {
            Button {
                withAnimation(.spring(response: 0.45, dampingFraction: 0.60, blendDuration: 0)){
                    self.showSearchBar.toggle()
                }
            } label: {
                Image(systemName: "magnifyingglass") // the problem is here///// this image gets to the left somehow when the animation happens
            }
            .transition(.move(edge: .trailing))
        }
    }
}

I uploaded the video of the animation here: https://files.fm/u/mpzr7zytn

The photo of the glitch: https://files.fm/u/sndev9jzc

Somehow the magnifying glass appears first.

Answer 1

Because you are using two different magnifiers.

For better understanding, take a look at this demo of your code with different colors and environments:

Try to change your login in a way that uses each component once and just move it around instead of removing and adding another one or you may face a hard situation synchronizing all animations!

for example:

NavigationView {
    VStack {
        HStack {
            Spacer()
            Button {
                withAnimation(.spring(response: 0.45, dampingFraction: 0.60, blendDuration: 0)){
                    self.showSearchBar.toggle()
                }
            } label: {
                Image(systemName: "magnifyingglass")
            }

            if showSearchBar {
                HStack {
                    TextField("Search", text: $txtSearch)
                    Button {
                        withAnimation(.spring(response: 0.45, dampingFraction: 0.60, blendDuration: 0)) {
                            self.showSearchBar.toggle()
                        }
                    } label: {
                        Image(systemName: "xmark")
                    }
                }
                .transition(.move(edge: .trailing))
            }
        }
        .transition(.move(edge: .trailing))
        Spacer()
    }
}

Note 1: I have simplified the code and made it ready for copy-paste.

Note 2: You should use FocusState instead of endEditing

Note 3: You may want to try using imgur for media files inside the StackOverflow.