Üretim Kodunu Değiştirmeden SwiftUI'da Yükleme Durumlarını Önizleme

Zorluk

Asenkron verilere bağımlı view’lar oluştururken, genellikle bir spinner veya placeholder gösteren bir yükleme durumun oluyor. Production’da bu durum, veriler ağdan veya veritabanından yüklenirken kısa süreliğine görünüyor. Ama SwiftUI preview’larında mock verilerin anında hazır olduğundan, yükleme durumu incelemek için çok hızlı geçiyor – ya da hiç görünmüyor.

Sadece Preview İçin Gecikme Yardımcısı

Çözüm, sadece preview veya debug bağlamlarında yapay bir gecikme ekleyen küçük bir yardımcı. İşte kalıp:

struct DelayedStatePreview<Content: View>: View {
   @State private var isLoaded = false
   let delay: Duration
   let content: (Bool) -> Content

   init(
      delay: Duration = .seconds(2),
      @ViewBuilder content: @escaping (Bool) -> Content
   ) {
      self.delay = delay
      self.content = content
   }

   var body: some View {
      content(isLoaded)
         .task {
            try? await Task.sleep(for: delay)
            isLoaded = true
         }
   }
}

Bunu bir preview’da şöyle kullanıyorsun:

#Preview {
   DelayedStatePreview { isLoaded in
      if isLoaded {
         ArticleListView(articles: mockArticles)
      } else {
         LoadingView()
      }
   }
}

Bu Neden Önemli

Temel fayda, production kodunun temiz kalması. Gerçek view’larına yapay gecikmeler veya debug bayrakları eklemiyorsun. Yardımcı tamamen preview katmanında var olarak, yükleme durumlarının doğru göründüğünü, geçişlerin düzgün animasyon yaptığını ve veriler geldiğinde düzenin sıçramadığını görsel olarak doğrulama imkanı tanıyor.

Bu, özellikle iskelet yükleyicileri veya parıltı efektleri olan view’lar için çok yararlı; yükleme durumunun görsel kalitesinin kullanıcı deneyiminin bir parçası olduğu durumlar.