macos: optimize secure input overlay animation

Rendering the Secure Keyboard Input overlay using
innerShadow() can strain the resources of the main
thread, leading to elevated CPU load and in some
cases extended disruptions to the main thread's
DispatchQueue that result in lag or frozen frames.

This change achieves the same animated visual
effect with ~35% lower CPU usage and resolves most
or all of the terminal rendering issues associated
with the overlay.
pull/10903/head
Brent Schroeter 2026-02-19 22:03:54 -08:00
parent 10039da572
commit 7e90e26ae1
1 changed files with 27 additions and 13 deletions

View File

@ -2,8 +2,8 @@ import SwiftUI
struct SecureInputOverlay: View {
// Animations
@State private var shadowAngle: Angle = .degrees(0)
@State private var shadowWidth: CGFloat = 6
@State private var gradientAngle: Angle = .degrees(0)
@State private var gradientOpacity: CGFloat = 0.5
// Popover explainer text
@State private var isPopover = false
@ -20,18 +20,32 @@ struct SecureInputOverlay: View {
.foregroundColor(.primary)
.padding(5)
.background(
RoundedRectangle(cornerRadius: 12)
Rectangle()
.fill(.background)
.innerShadow(
using: RoundedRectangle(cornerRadius: 12),
stroke: AngularGradient(
gradient: Gradient(colors: [.cyan, .blue, .yellow, .blue, .cyan]),
center: .center,
angle: shadowAngle
),
width: shadowWidth
.overlay(
Rectangle()
.fill(
AngularGradient(
gradient: Gradient(
colors: [.cyan, .blue, .yellow, .blue, .cyan]
),
center: .center,
angle: gradientAngle
)
)
.blur(radius: 4, opaque: true)
.mask(
RadialGradient(
colors: [.clear, .black],
center: .center,
startRadius: 0,
endRadius: 25
)
)
.opacity(gradientOpacity)
)
)
.mask(RoundedRectangle(cornerRadius: 12))
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(Color.gray, lineWidth: 1)
@ -57,11 +71,11 @@ struct SecureInputOverlay: View {
}
.onAppear {
withAnimation(Animation.linear(duration: 2).repeatForever(autoreverses: false)) {
shadowAngle = .degrees(360)
gradientAngle = .degrees(360)
}
withAnimation(Animation.linear(duration: 2).repeatForever(autoreverses: true)) {
shadowWidth = 12
gradientOpacity = 1
}
}
}