import QtQuick import qs.Commons Item { id: root property bool running: true property color color: Color.mPrimary property int size: Style.baseWidgetSize property int strokeWidth: Style.borderL property int duration: Style.animationSlow * 2 implicitWidth: size implicitHeight: size // GPU-optimized spinner - draw once, rotate with GPU transform Item { id: spinner anchors.fill: parent // Static canvas - drawn ONCE, then cached Canvas { id: canvas anchors.fill: parent renderStrategy: Canvas.Cooperative // Better performance than Threaded for simple shapes renderTarget: Canvas.FramebufferObject // GPU texture // Enable layer caching - critical for performance! layer.enabled: true layer.smooth: true Component.onCompleted: { requestPaint() } onPaint: { var ctx = getContext("2d") ctx.reset() var centerX = width / 2 var centerY = height / 2 var radius = Math.min(width, height) / 2 - strokeWidth / 2 ctx.strokeStyle = root.color ctx.lineWidth = Math.max(1, root.strokeWidth) ctx.lineCap = "round" // Draw arc with gap (270 degrees = 3/4 of circle) ctx.beginPath() ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + Math.PI * 1.5) ctx.stroke() } } // Smooth rotation animation - uses GPU transform, NO canvas repaints! RotationAnimation on rotation { running: root.running from: 0 to: 360 duration: root.duration loops: Animation.Infinite } } }