Improved placeholder state in Explore tab

Author: insidegui

WWDC/ExploreTabContent.swift

@@ -72,13 +72,47 @@ extension ExploreTabContent.Item {
             imageURL: URL(string: "https://wwdc.io/images/placeholder.jpg")!
         )
     ]
+    static let placeholderItems2: [ExploreTabContent.Item] = [
+        .init(
+            id: "4",
+            title: "Placeholder Item Regular",
+            subtitle: "Placeholder Description 4",
+            overlayText: "24m",
+            overlaySymbol: "play",
+            imageURL: URL(string: "https://wwdc.io/images/placeholder.jpg")!
+        ),
+        .init(
+            id: "5",
+            title: "Placeholder",
+            subtitle: "Placeholder Item Description 5",
+            overlayText: "37m",
+            overlaySymbol: "play",
+            imageURL: URL(string: "https://wwdc.io/images/placeholder.jpg")!
+        ),
+        .init(
+            id: "6",
+            title: "Placeholder Item Longer Title",
+            subtitle: "Placeholder Item Description 6",
+            overlayText: "37m",
+            overlaySymbol: "play",
+            imageURL: URL(string: "https://wwdc.io/images/placeholder.jpg")!
+        ),
+        .init(
+            id: "7",
+            title: "Placeholder",
+            subtitle: "Item Description 7",
+            overlayText: "35m",
+            overlaySymbol: "play",
+            imageURL: URL(string: "https://wwdc.io/images/placeholder.jpg")!
+        )
+    ]
 }
 
 extension ExploreTabContent {
     static let placeholder: ExploreTabContent = {
         ExploreTabContent(id: "1", sections: [
             Section(id: "placeholder-1", title: "Placeholder Section First", icon: .symbol("app.badge.checkmark"), items: ExploreTabContent.Item.placeholderItems),
-            Section(id: "placeholder-2", title: "Placeholder Section Second Longer Title", icon: .symbol("app.badge.checkmark"), items: ExploreTabContent.Item.placeholderItems),
+            Section(id: "placeholder-2", title: "Placeholder Section Second Longer Title", icon: .symbol("app.badge.checkmark"), items: ExploreTabContent.Item.placeholderItems2),
             Section(id: "placeholder-3", title: "Placeholder Short", icon: .symbol("app.badge.checkmark"), items: ExploreTabContent.Item.placeholderItems)
         ])
     }()

WWDC/ExploreTabItemView.swift

@@ -27,7 +27,13 @@ struct ExploreTabItemView: View {
             item.progress != nil ? .topTrailing : .bottomTrailing
         }
 
-        private var hasOverlay: Bool { item.overlayText != nil || item.overlaySymbol != nil }
+        @Environment(\.redactionReasons)
+        private var redactionReasons
+
+        private var hasOverlay: Bool {
+            guard redactionReasons.isEmpty else { return false }
+            return item.overlayText != nil || item.overlaySymbol != nil
+        }
 
         var body: some View {
             VStack(alignment: .leading, spacing: 8) {

WWDC/ExploreTabRootView.swift

@@ -4,15 +4,18 @@ struct ExploreTabRootView: View {
     @EnvironmentObject private var provider: ExploreTabProvider
 
     var body: some View {
-        if let content = provider.content {
-            ExploreTabContentView(content: content, scrollOffset: $provider.scrollOffset)
-                #if DEBUG
-                .contextMenu { Button("Export JSON…", action: content.exportJSON) }
-                #endif
-        } else {
-            ExploreTabContentView(content: .placeholder, scrollOffset: .constant(.zero))
-                .redacted(reason: .placeholder)
+        ZStack {
+            if let content = provider.content {
+                ExploreTabContentView(content: content, scrollOffset: $provider.scrollOffset)
+                    #if DEBUG
+                    .contextMenu { Button("Export JSON…", action: content.exportJSON) }
+                    #endif
+            } else {
+                ExploreTabContentView(content: .placeholder, scrollOffset: .constant(.zero))
+                    .redacted(reason: .placeholder)
+            }
         }
+        .animation(.spring(), value: provider.content?.sections.flatMap(\.items).count)
     }
 
 }