[SwiftUI] SwiftUIでCoreDataのデータ読み込み中にスピナーを表示する

背景

CoreDataは、データの永続化を容易にします。しかし、データを読み込む際に時間がかかる場合、画面が一時的に空の状態になったり、表示が不自然になる場合があります。

問題の詳細

例えば、CoreDataから大量のデータを非同期で読み込む場合、データの読み込みが完了するまで一部のUIが空白になることがあります。これはユーザー体験において理想的ではなく、ユーザーがアプリケーションがフリーズしていると誤解する原因となり得ます。

環境

Xcode : 14.3

Swift : 5.8

SwiftUIを使用

解決策

この問題を解決するためには、データが完全にロードされるまで一時的にスピナーを表示します。これによりユーザーはデータがまだロード中であることを知ることができ、安心してアプリを使用することができます。

以下に、この手法を適用したサンプルコードを示します。

struct ContentView: View {
    @ObservedObject var dataStore = DataStore()

    var body: some View {
						//データがまだ空の場合Spinnerを表示
        if dataStore.items.isEmpty {
            SpinnerView()
        } else {
            DataBasedView(items: dataStore.items)
        }
    }
}

struct SpinnerView: View {
    var body: some View {
        ProgressView()
            .progressViewStyle(CircularProgressViewStyle(tint: .blue))
            .scaleEffect(2, anchor: .center)
    }
}

このサンプルコードでは、dataStore.items が空（つまり、データがまだロードされていない）の場合、スピナーを表示します。データがロードされると、dataStore.items にアイテムが追加され、Viewが再描画されます。このとき、データを元にしたViewが表示されます。

まとめ

SwiftUIとCoreDataを使用してアプリケーションを開発する際、データの読み込みが完了するまでスピナーを表示することで、ユーザー体験を大いに向上させることができます。

いいね、ブックマーク、フォローしていただけると勉強の励みになりますので是非お願いします。😉

追伸　--
Twitterで日々の学習風景を投稿してます。

@Ren_yello