Show loading indcators instead of grayscale (#25405)

Author: kean

Modules/Sources/JetpackStats/Cards/ChartCard.swift

@@ -42,13 +42,19 @@ struct ChartCard: View {
             viewModel.onAppear()
         }
         .overlay(alignment: .topTrailing) {
-            moreMenu
+            HStack(spacing: 0) {
+                if viewModel.isStale {
+                    ProgressView()
+                        .controlSize(.small)
+                        .transition(.scale.combined(with: .opacity))
+                }
+                moreMenu
+            }
+            .animation(.easeInOut(duration: 0.5), value: viewModel.isStale)
         }
         .cardStyle()
-        .grayscale(viewModel.isStale ? 1 : 0)
         .opacity(viewModel.isEditing ? 0.6 : 1)
         .scaleEffect(viewModel.isEditing ? 0.95 : 1)
-        .animation(.smooth, value: viewModel.isStale)
         .animation(.spring, value: viewModel.isEditing)
         .accessibilityElement(children: .contain)
         .accessibilityLabel(Strings.Accessibility.chartContainer)

Modules/Sources/JetpackStats/Cards/ChartCardViewModel.swift

@@ -127,7 +127,7 @@ final class ChartCardViewModel: ObservableObject, TrafficCardViewModel {
         // no response in more than T seconds.
         if !chartData.isEmpty {
             staleTimer = Task { [weak self] in
-                try? await Task.sleep(for: .seconds(2))
+                try? await Task.sleep(for: .seconds(0.8))
                 guard !Task.isCancelled else { return }
                 self?.isStale = true
             }

Modules/Sources/JetpackStats/Cards/TopListCard.swift

@@ -56,18 +56,24 @@ struct TopListCard: View {
         }
         .padding(.vertical, Constants.step2)
         .overlay(alignment: .topTrailing) {
-            moreMenu
+            HStack(spacing: 0) {
+                if viewModel.isStale {
+                    ProgressView()
+                        .controlSize(.small)
+                        .transition(.scale.combined(with: .opacity))
+                }
+                moreMenu
+            }
+            .animation(.easeInOut(duration: 0.5), value: viewModel.isStale)
         }
         .cardStyle()
         .onTapGesture {
             if !showMoreInline {
                 navigateToTopListScreen()
             }
         }
-        .grayscale(viewModel.isStale ? 1 : 0)
         .opacity(viewModel.isEditing ? 0.6 : 1)
         .scaleEffect(viewModel.isEditing ? 0.95 : 1)
-        .animation(.smooth, value: viewModel.isStale)
         .animation(.spring, value: viewModel.isEditing)
         .accessibilityElement(children: .contain)
         .animation(.spring, value: viewModel.data.map(ObjectIdentifier.init)) // placing is important

Modules/Sources/JetpackStats/Cards/TopListViewModel.swift

@@ -133,7 +133,7 @@ final class TopListViewModel: ObservableObject, TrafficCardViewModel {
         // no response in more than T seconds.
         if data != nil {
             staleTimer = Task { [weak self] in
-                try? await Task.sleep(for: .seconds(2))
+                try? await Task.sleep(for: .seconds(0.8))
                 guard !Task.isCancelled else { return }
                 self?.isStale = true
             }