add list placeholder

Author: Tlaster

iosApp/flare/Localizable.xcstrings

@@ -218,6 +218,12 @@
     },
     "like" : {
 
+    },
+    "list description" : {
+
+    },
+    "list title" : {
+
     },
     "local_filter_title" : {
 

iosApp/flare/UI/Component/PagingView.swift

@@ -45,4 +45,14 @@ extension PagingView {
     ) where ErrorContent == EmptyView, LoadingContent == EmptyView, EmptyContent == EmptyView {
         self.init(data: data, emptyContent: { EmptyView() }, errorContent: {_ in EmptyView()}, loadingContent: {EmptyView()}, successContent: successContent)
     }
+    
+    init(
+        data: PagingState<T>,
+        @ViewBuilder
+        successContent: @escaping (T) -> SuccessContent,
+        @ViewBuilder
+        loadingContent: @escaping () -> LoadingContent
+    ) where ErrorContent == EmptyView, EmptyContent == EmptyView {
+        self.init(data: data, emptyContent: { EmptyView() }, errorContent: {_ in EmptyView()}, loadingContent: loadingContent, successContent: successContent)
+    }
 }

iosApp/flare/UI/Component/UiListView.swift

@@ -0,0 +1,49 @@
+import SwiftUI
+import KotlinSharedUI
+
+struct UiListView: View {
+    let data: UiList
+    var body: some View {
+        VStack(
+            alignment: .leading,
+            spacing: 8
+        ) {
+            Label {
+                Text(data.title)
+            } icon: {
+                if let image = data.avatar {
+                    AvatarView(data: image)
+                        .frame(width: 24, height: 24)
+                } else {
+                    Image("fa-list")
+                }
+            }
+            if let desc = data.description_, !desc.isEmpty {
+                Text(desc)
+                    .font(.caption)
+                    .foregroundStyle(.secondary)
+            }
+        }
+    }
+}
+
+struct UiListPlaceholder: View {
+    var body: some View {
+        VStack(
+            alignment: .leading,
+            spacing: 8
+        ) {
+            HStack {
+                Rectangle()
+                    .fill(.placeholder)
+                    .frame(width: 24, height: 24)
+                    .clipShape(.circle)
+                Text("list title")
+            }
+            Text("list description")
+                .font(.caption)
+                .foregroundStyle(.secondary)
+        }
+        .redacted(reason: .placeholder)
+    }
+}

iosApp/flare/UI/Screen/AllFeedScreen.swift

@@ -20,16 +20,10 @@ struct AllFeedScreen: View {
                                 Bluesky.FeedTabItem(account: accountType, uri: item.id, metaData: .init(title: TitleType.Text(content: item.title), icon: IconType.Material(icon: .feeds)))
                             )
                     ) {
-                        Label {
-                            Text(item.title)
-                        } icon: {
-                            if let image = item.avatar {
-                                AvatarView(data: image)
-                            } else {
-                                Image("fa-list")
-                            }
-                        }
+                        UiListView(data: item)
                     }
+                } loadingContent: {
+                    UiListPlaceholder()
                 }
             } header: {
                 Text("all_feeds_section_my_feeds")
@@ -44,28 +38,11 @@ struct AllFeedScreen: View {
                                     Bluesky.FeedTabItem(account: accountType, uri: item.id, metaData: .init(title: TitleType.Text(content: item.title), icon: IconType.Material(icon: .feeds)))
                                 )
                         ) {
-                            VStack(
-                                alignment: .leading,
-                                spacing: 8
-                            ) {
-                                Label {
-                                    Text(item.title)
-                                } icon: {
-                                    if let image = item.avatar {
-                                        AvatarView(data: image)
-                                            .frame(width: 24, height: 24)
-                                    } else {
-                                        Image("fa-list")
-                                    }
-                                }
-                                if let desc = item.description_, !desc.isEmpty {
-                                    Text(desc)
-                                        .font(.caption)
-                                        .foregroundStyle(.secondary)
-                                }
-                            }
+                            UiListView(data: item)
                         }
                     }
+                } loadingContent: {
+                    UiListPlaceholder()
                 }
             } header: {
                 Text("all_feeds_section_explore_feeds")

iosApp/flare/UI/Screen/AllListScreen.swift

@@ -26,16 +26,10 @@ struct AllListScreen: View {
                             )
                         )
                 ) {
-                    Label {
-                        Text(item.title)
-                    } icon: {
-                        if let image = item.avatar {
-                            AvatarView(data: image)
-                        } else {
-                            Image("fa-list")
-                        }
-                    }
+                    UiListView(data: item)
                 }
+            } loadingContent: {
+                UiListPlaceholder()
             }
         }
         .navigationTitle("all_lists_title")