Merge pull request #5823 from woocommerce/feat/5742-update-placeholder-separately

Remove placeholder content for store stats / top performers sections for each time range tab ASAP

Author: jaclync

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsAndTopPerformersPeriodViewController.swift

@@ -189,10 +189,15 @@ extension StoreStatsAndTopPerformersPeriodViewController {
         topPerformersPeriodViewController.displayGhostContent()
     }
 
-    /// Unlocks the and removes the Placeholder Content
+    /// Removes the placeholder content for store stats.
     ///
-    func removeGhostContent() {
+    func removeStoreStatsGhostContent() {
         storeStatsPeriodViewController.removeGhostContent()
+    }
+
+    /// Removes the placeholder content for top performers.
+    ///
+    func removeTopPerformersGhostContent() {
         topPerformersPeriodViewController.removeGhostContent()
     }
 

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsAndTopPerformersViewController.swift

@@ -110,7 +110,6 @@ private extension StoreStatsAndTopPerformersViewController {
         defer {
             group.notify(queue: .main) { [weak self] in
                 self?.isSyncing = false
-                self?.removeGhostContent()
                 self?.showSpinner(shouldShowSpinner: false)
                 if let error = syncError {
                     DDLogError("⛔️ Error loading dashboard: \(error)")
@@ -151,8 +150,12 @@ private extension StoreStatsAndTopPerformersViewController {
             // For tasks dispatched for each time period.
             let periodGroup = DispatchGroup()
 
+            // For tasks dispatched for store stats (order and visitor stats) for each time period.
+            let periodStoreStatsGroup = DispatchGroup()
+
             group.enter()
             periodGroup.enter()
+            periodStoreStatsGroup.enter()
             self.syncStats(for: siteID,
                            siteTimezone: timezoneForSync,
                            timeRange: vc.timeRange,
@@ -166,10 +169,12 @@ private extension StoreStatsAndTopPerformersViewController {
                 }
                 group.leave()
                 periodGroup.leave()
+                periodStoreStatsGroup.leave()
             }
 
             group.enter()
             periodGroup.enter()
+            periodStoreStatsGroup.enter()
             self.syncSiteVisitStats(for: siteID,
                                     siteTimezone: timezoneForSync,
                                     timeRange: vc.timeRange,
@@ -180,6 +185,7 @@ private extension StoreStatsAndTopPerformersViewController {
                 }
                 group.leave()
                 periodGroup.leave()
+                periodStoreStatsGroup.leave()
             }
 
             group.enter()
@@ -194,6 +200,8 @@ private extension StoreStatsAndTopPerformersViewController {
                 }
                 group.leave()
                 periodGroup.leave()
+
+                vc.removeTopPerformersGhostContent()
             }
 
             periodGroup.notify(queue: .main) {
@@ -204,6 +212,10 @@ private extension StoreStatsAndTopPerformersViewController {
                     syncError = periodSyncError
                 }
             }
+
+            periodStoreStatsGroup.notify(queue: .main) {
+                vc.removeStoreStatsGhostContent()
+            }
         }
     }
 
@@ -225,27 +237,12 @@ private extension StoreStatsAndTopPerformersViewController {
     /// Displays the Ghost Placeholder whenever there is no visible data.
     ///
     func ensureGhostContentIsDisplayed() {
-        guard visibleChildViewController.shouldDisplayStoreStatsGhostContent else {
-            return
+        periodVCs.forEach { periodVC in
+            guard periodVC.shouldDisplayStoreStatsGhostContent else {
+                return
+            }
+            periodVC.displayGhostContent()
         }
-
-        displayGhostContent()
-    }
-
-    /// Locks UI Interaction and displays Ghost Placeholder animations.
-    ///
-    func displayGhostContent() {
-        view.isUserInteractionEnabled = false
-        buttonBarView.startGhostAnimation(style: .wooDefaultGhostStyle)
-        visibleChildViewController.displayGhostContent()
-    }
-
-    /// Unlocks the and removes the Placeholder Content
-    ///
-    func removeGhostContent() {
-        view.isUserInteractionEnabled = true
-        buttonBarView.stopGhostAnimation()
-        visibleChildViewController.removeGhostContent()
     }
 
     /// If the Ghost Content was previously onscreen, this method will restart the animations.

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsV4PeriodViewController.swift

@@ -1,6 +1,7 @@
 import Charts
 import Combine
 import UIKit
+import struct WordPressUI.GhostStyle
 import Yosemite
 
 /// Different display modes of site visit stats
@@ -160,6 +161,13 @@ final class StoreStatsV4PeriodViewController: UIViewController {
         observeReloadChartAnimated()
     }
 
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+
+        // After returning to the My Store tab, `restartGhostAnimation` is required to resume ghost animation.
+        restartGhostAnimationIfNeeded()
+    }
+
     override func viewDidAppear(_ animated: Bool) {
         super.viewDidAppear(animated)
         reloadAllFields()
@@ -243,7 +251,7 @@ extension StoreStatsV4PeriodViewController {
     ///
     func displayGhostContent() {
         ensurePlaceholderIsVisible()
-        placeholderChartsView.startGhostAnimation(style: .wooDefaultGhostStyle)
+        placeholderChartsView.startGhostAnimation(style: Constants.ghostStyle)
     }
 
     /// Removes the Placeholder Content.
@@ -267,6 +275,12 @@ extension StoreStatsV4PeriodViewController {
         view.pinSubviewToAllEdges(placeholderChartsView)
     }
 
+    private func restartGhostAnimationIfNeeded() {
+        guard placeholderChartsView.superview != nil else {
+            return
+        }
+        placeholderChartsView.restartGhostAnimation(style: Constants.ghostStyle)
+    }
 }
 
 // MARK: - Configuration
@@ -748,5 +762,7 @@ private extension StoreStatsV4PeriodViewController {
 
         static let containerBackgroundColor: UIColor = .systemBackground
         static let headerComponentBackgroundColor: UIColor = .clear
+
+        static let ghostStyle: GhostStyle = .wooDefaultGhostStyle
     }
 }