Better image loading placeholder

Packages/DesignSystem/Sources/DesignSystem/Views/AvatarView.swift

@@ -1,4 +1,5 @@
 import SwiftUI
+import Shimmer
 
 public struct AvatarView: View {
   public enum Size {
@@ -35,10 +36,13 @@ public struct AvatarView: View {
           if size == .badge {
             Circle()
               .fill(.gray)
-              .frame(maxWidth: size.size.width, maxHeight: size.size.height)
+              .frame(width: size.size.width, height: size.size.height)
+              .shimmering()
           } else {
-            ProgressView()
-              .frame(maxWidth: size.size.width, maxHeight: size.size.height)
+            RoundedRectangle(cornerRadius: size == .profile ? 4 : size.size.width / 2)
+              .fill(.gray)
+              .frame(width: size.size.width, height: size.size.height)
+              .shimmering()
           }
         case let .success(image):
           image.resizable()

Packages/Notifications/Sources/Notifications/NotificationRowView.swift

@@ -17,16 +17,12 @@ struct NotificationRowView: View {
           .onTapGesture {
             routeurPath.navigate(to: .accountDetailWithAccount(account: notification.account))
         }
-        VStack(alignment: .leading, spacing: 4) {
+        VStack(alignment: .leading, spacing: 0) {
           HStack(spacing: 0) {
-            Image(systemName: type.iconName())
-              .resizable()
-              .frame(width: 16, height: 16)
-              .aspectRatio(contentMode: .fit)
-              .padding(.horizontal, 4)
             if type.displayAccountName() {
               notification.account.displayNameWithEmojis
                 .font(.subheadline)
+                .fontWeight(.semibold)
               Text(" ")
             }
             Text(type.label())
@@ -85,25 +81,6 @@ extension Models.Notification.NotificationType {
       return "has been edited"
     }
   }
-  
-  func iconName() -> String {
-    switch self {
-    case .status:
-      return "pencil"
-    case .mention:
-      return "at.circle.fill"
-    case .reblog:
-      return "arrow.left.arrow.right.circle.fill"
-    case .follow, .follow_request:
-      return "person.fill.badge.plus"
-    case .favourite:
-      return "star.fill"
-    case .poll:
-      return "chart.bar.fill"
-    case .update:
-      return "pencil.line"
-    }
-  }
 }
 
 struct NotificationRowView_Previews: PreviewProvider {

Packages/Status/Sources/Status/Row/StatusCardView.swift

@@ -1,5 +1,6 @@
 import SwiftUI
 import Models
+import Shimmer
 
 struct StatusCardView: View {
   @Environment(\.openURL) private var openURL
@@ -18,8 +19,10 @@ struct StatusCardView: View {
                 .clipped()
             },
             placeholder: {
-              ProgressView()
-                .frame(maxWidth: 40, maxHeight: 40)
+              Rectangle()
+                .fill(Color.gray)
+                .frame(height: 200)
+                .shimmering()
             }
           )
         }

Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift

@@ -2,6 +2,7 @@ import SwiftUI
 import Models
 import AVKit
 import Env
+import Shimmer
 
 private class VideoPlayerViewModel: ObservableObject {
   @Published var player: AVPlayer?
@@ -87,8 +88,11 @@ public struct StatusMediaPreviewView: View {
                   .frame(width: proxy.frame(in: .local).width)
               },
               placeholder: {
-                ProgressView()
-                  .frame(maxWidth: 80, maxHeight: 80)
+                RoundedRectangle(cornerRadius: 4)
+                  .fill(Color.gray)
+                  .frame(height: attachements.count > 2 ? 100 : 200)
+                  .frame(width: proxy.frame(in: .local).width)
+                  .shimmering()
               }
             )
           case .gifv: