Currently I have a cloud syncing status icon that utilizes the new "rotate" symbol effect introduced with iOS 18. After the synchronization is complete, I want to replace the icon with another symbol using the "replace" contentTransition. These are the codes I used to achieve this:
Image(systemName: coreDataStack.cloudKitUIStatus.symbolName)
.foregroundColor(coreDataStack.cloudKitUIStatus.symbolColor)
.symbolEffect(.rotate, isActive: coreDataStack.cloudKitUIStatus == .inProgress)
.contentTransition(.symbolEffect(.replace))
However, the rotation effect continues after the replace transition. This means the new icon (checkmark.icloud.fill) continues the spinning animation from the previous symbol (arrow.triangle.2.circlepath.icloud) until it completes the full circle.
How can I stop the rotation immediately before the contentTransition? Thanks!