Reader: Fix navigation button animation issues (#22808)

wordpress-mobile · Mar 12, 2024 · da8d2d7 · da8d2d7
2 parents 9464cf8 + 98fb22f
commit da8d2d7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationButton.swift b/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationButton.swift
@@ -39,24 +39,29 @@ struct ReaderNavigationButton: View {
     }
 
     private func menuLabel(for item: ReaderTabItem) -> some View {
-        HStack(spacing: 4.0) {
-            item.image
-                .frame(width: 24.0, height: 24.0)
-                .foregroundColor(Colors.primary)
-            Text(item.title)
-                .foregroundStyle(Colors.primary)
-                .font(.subheadline.weight(.semibold))
-                .minimumScaleFactor(0.1) // prevents the text from truncating while in transition.
-                .frame(minHeight: 24.0)
-            Image("reader-menu-chevron-down")
-                .frame(width: 16.0, height: 16.0)
-                .foregroundColor(Colors.primary)
+        /// There's a bug/unexpected behavior with how `SwiftUI.Menu`'s label "twitches" when it's animated.
+        /// Using `ZStack` is a hack to prevent the "container" view from twitching during animation.
+        ZStack {
+            // This is used for the background component.
+            Capsule().fill(Colors.background)
+
+            HStack(spacing: 4.0) {
+                item.image
+                    .frame(width: 24.0, height: 24.0)
+                    .foregroundColor(Colors.primary)
+                Text(item.title)
+                    .foregroundStyle(Colors.primary)
+                    .font(.subheadline.weight(.semibold))
+                    .minimumScaleFactor(0.1) // prevents the text from truncating while in transition.
+                    .frame(minHeight: 24.0)
+                Image("reader-menu-chevron-down")
+                    .frame(width: 16.0, height: 16.0)
+                    .foregroundColor(Colors.primary)
+            }
+            .padding(.vertical, 6.0)
+            .padding(.leading, item.image == nil ? 16.0 : 8.0)
+            .padding(.trailing, 12.0)
         }
-        .padding(.vertical, 6.0)
-        .padding(.leading, item.image == nil ? 16.0 : 8.0)
-        .padding(.trailing, 12.0)
-        .background(Colors.background)
-        .clipShape(Capsule())
     }
 
     private func menuButton(for item: ReaderTabItem) -> some View {

diff --git a/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationMenu.swift b/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationMenu.swift
@@ -30,6 +30,7 @@ struct ReaderNavigationMenu: View {
                 HStack {
                     ReaderNavigationButton(viewModel: viewModel)
                         .frame(maxHeight: .infinity)
+                        .zIndex(1)
                         .animation(.easeInOut, value: viewModel.selectedItem)
                     streamFilterView
                     // add some empty space so that the last filter chip doesn't get covered by the gradient mask.