Merge pull request #829 from kiwicom/828-timelineindicator-animation-…

…breaks-layout Fix TimelineIndicator animation
kiwicom · Aug 16, 2024 · 034ee92 · 034ee92
2 parents cbad67f + 2bf9cd6
commit 034ee92
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/Sources/Orbit/Support/Components/TimelineIndicator.swift b/Sources/Orbit/Support/Components/TimelineIndicator.swift
@@ -19,7 +19,13 @@ public struct TimelineIndicator: View {
                 height: TimelineIndicator.indicatorDiameter * sizeCategory.ratio
             )
             .alignmentGuide(.firstTextBaseline) { $0.height * 0.68 }
-            .onAppear { animationLoopTrigger = !isReduceMotionEnabled }
+            .onAppear { 
+                guard isReduceMotionEnabled == false else { return }
+
+                withAnimation(.easeInOut.repeatForever().speed(0.25)) {
+                    animationLoopTrigger = true
+                } 
+            }
     }
 
     @ViewBuilder private var indicator: some View {
@@ -33,7 +39,6 @@ public struct TimelineIndicator: View {
                         height: (animationLoopTrigger ? .medium : .xMedium) * sizeCategory.ratio
                     )
                     .foregroundColor(animationLoopTrigger ? Color.clear : type.color.opacity(0.1))
-                    .animation(animation, value: animationLoopTrigger)
                     .overlay(icon)
             case .past:
                 Circle()
@@ -57,7 +62,6 @@ public struct TimelineIndicator: View {
                             width: (animationLoopTrigger ? .medium : .xMedium) * sizeCategory.ratio,
                             height: (animationLoopTrigger ? .medium : .xMedium) * sizeCategory.ratio
                         )
-                        .animation(animation, value: animationLoopTrigger)
                         .foregroundColor((iconColor ?? type.color).opacity(0.1))
 
                     Circle()
@@ -69,7 +73,6 @@ public struct TimelineIndicator: View {
                         .frame(width: .xxSmall * sizeCategory.ratio, height: .xxSmall * sizeCategory.ratio)
                         .scaleEffect(animationLoopTrigger ? 0.5 : 1)
                         .foregroundColor(animationLoopTrigger ? Color.clear : iconColor ?? type.color)
-                        .animation(animation, value: animationLoopTrigger)
 
                 }
             case .present(.warning), .present(.critical), .present(.success), .past:
@@ -79,10 +82,6 @@ public struct TimelineIndicator: View {
                     .background(Circle().fill(.whiteNormal).padding(2))
         }
     }
-
-    private var animation: Animation {
-        Animation.easeInOut.repeatForever().speed(0.25)
-    }
 
     /// Creates Orbit ``TimelineIndicator`` component.
     public init(type: TimelineItemType = .present) {
@@ -103,18 +102,21 @@ struct TimelineIndicatorPreviews: PreviewProvider {
     static var standalone: some View {
         HorizontalScroll {
             HStack(spacing: .xxSmall) {
-                ForEach(1..<20) { _ in
-                        VStack {
-                            SwiftUI.Button {
-                                // noa ction
-                            } label: {
+                ForEach(1..<4) { index in
+                    VStack(spacing: .medium) {
+                        SwiftUI.Button {
+                            // No Action
+                        } label: {
+                            VStack(spacing: .medium) {
+                                TimelineIndicator(type: .future)
+                                TimelineIndicator(type: .past)
                                 TimelineIndicator(type: .present)
-                                Text("Heyyyyyyyyyyy")
+                                TimelineIndicator(type: .present(.critical))
                             }
-//                            Spacer()
                         }
-
-                        Separator()
+                    }
+
+                    Separator()
                 }
             }
             .padding(.medium)

diff --git a/Sources/Orbit/Support/Layout/HorizontalScrollReader.swift b/Sources/Orbit/Support/Layout/HorizontalScrollReader.swift
@@ -81,6 +81,7 @@ struct HorizontalScrollReaderPreviews: PreviewProvider {
                             Tile("Tile \(index)", description: "Tap to scroll to previous") {
                                 scrollProxy.scrollTo(index - 1, animated: state.wrappedValue.1)
                             }
+                            .overlay(TimelineIndicator(), alignment: .topTrailing)
                             .identifier(index)
                         }
 
@@ -92,11 +93,9 @@ struct HorizontalScrollReaderPreviews: PreviewProvider {
                     }
 
                     Checkbox("Snapping", isChecked: state.0)
-                    // FIXME: Binding does not work correctly?
                         .id(state.wrappedValue.0 ? 1 : 0)
 
                     Checkbox("Animated", isChecked: state.1)
-                    // FIXME: Binding does not work correctly?
                         .id(state.wrappedValue.1 ? 1 : 0)
 
                     Button("Scroll to First") {