Searching for for the perfect apply so as to add ‘eye’ choice to secureField textual content field in swift

I would like so as to add to my an choice to reveal the password worth in my safe subject textbox. At the moment I am doing it by rendering TextField if showPassword is on, and SecureField if it is off. Nevertheless, the re-rendering itself trigger an abrupt micro vibration within the widget, and I’m wondering if there is a extra native method to take action. in search of attribute to point out textual content in secureField led to no consequence. Maybe there’s one other method ?

this is my code :

                        ZStack(alignment: .trailing) {
                            Group {
                                if isPasswordVisible {
                                    TextField("Enter your password", textual content: $password)
                                        .body(top: 36)
                                        .textFieldStyle(PlainTextFieldStyle())
                                        .padding(.main, 16)
                                        .padding(.trailing, 40)
                                        .disabled(cbhandler.isUserLoginInProgress)
                                        .onSubmit {
                                            login()
                                        }
                                } else {
                                    SecureField("Enter your password", textual content: $password)
                                        .body(top: 36)
                                        .textFieldStyle(PlainTextFieldStyle())
                                        .padding(.main, 16)
                                        .padding(.trailing, 40)
                                        .disabled(cbhandler.isUserLoginInProgress)
                                        .onSubmit {
                                            login()
                                        }
                                }
                            }
                            .cornerRadius(3)
                            .foregroundColor(colorScheme == .gentle ? Colour.TEXT_TEXTFIELD_LIGHT : Colour.TEXT_TEXTFIELD_DARK)
                            .background(colorScheme == .gentle ? Colour.TEXT_TEXTFIELD_BACKGROUND_LIGHT : Colour.TEXT_TEXTFIELD_BACKGROUND_DARK)
                            .overlay(
                                RoundedRectangle(cornerRadius: 3)
                                    .stroke(Colour(hex: "#9F9F9F"))
                            )
                            .animation(.none, worth: isPasswordVisible)

                            Button(motion: {
                                isPasswordVisible.toggle()
                            }) {
                                Picture(systemName: isPasswordVisible ? "eye.slash.fill" : "eye.fill")
                                    .foregroundColor(Colour(hex: "#9F9F9F"))
                                    .font(.system(dimension: 14))
                            }
                            .buttonStyle(PlainButtonStyle())
                            .body(width: 36, top: 36)
                            .disabled(cbhandler.isUserLoginInProgress)
                        }

and this is the way it appears to be like like on each states :