In search of for the most effective observe so as to add ‘eye’ choice to secureField textual content field in swift

I would like so as to add to my an possibility to reveal the password worth in my safe area textbox. Presently 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. on the lookout for attribute to indicate textual content in secureField led to no outcome. Maybe there’s one other method ?

this is my code :

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

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

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