ModelからViewに対して処理の開始/終了を通知し、処理中の旨を示す表示のON/OFFを行いたい

Question

前提・実現したいこと

SwiftUIにて画面部及び処理部を作成しています。
今回、処理部で行う処理において10秒程度かかる重たい処理があるため、
処理中は「処理中…」という内容のプログレスビューを画面上に表示し、ユーザにその旨を知らせたいです。

現在は、処理クラスのインスタンスをObservedObjectとして画面側に持ち、
処理クラス内でPublished宣言されている処理開始/終了を示すフラグの変化を画面側で検知して、
表示のON/OFFを切り替えようとしています。

発生している問題・エラーメッセージ

処理開始/終了を示すフラグの変化検知について、画面側で検知できているにはできているのですが、
処理クラスの処理が完全に終わった後（下記コードのstartInspect()がreturnした後）に、処理開始/終了を示すフラグ双方の変化検知がほぼ同時に走ってしまい、困っています。

・実現したい動き
1.処理呼び出し
2.処理開始フラグをtoggle
3.画面側で処理開始フラグ変化検知して処理開始時処理(「処理中」表示フラグON)を実施
4.重たい処理を実行
5.処理終了フラグをtoggle
6.画面側で処理終了フラグ変化検知して処理終了時処理(「処理中」表示フラグOFF)を実施

・現在の動き
1.処理呼び出し
2.処理開始フラグをtoggle
3.重たい処理を実行
4.処理終了フラグをtoggle
5.画面側で処理開始フラグ変化検知して処理開始時処理(「処理中」表示フラグON)を実施
6.画面側で処理終了フラグ変化検知して処理終了時処理(「処理中」表示フラグOFF)を実施

上記のような動きになってしまっているため、下記コードのisProgressShowingフラグが一瞬しかtrueにならず、
プログレスビューを表示することができません。
どうしたら実現したい動きを実施できるのでしょうか？

該当のソースコード

↓画面部

import SwiftUI

struct ManualInspection_Crossing: View {
	
    //プログレスビュー表示フラグ
    @State var isProgressShowing: Bool = false
    //処理クラス
    @ObservedObject var predictorIns: InspectorModel_Crossing = InspectorModel_Crossing()
    //処理結果
    @State var predictRslt: Int = 0
    
    var body: some View {
        ZStack {
            
            Button(action: {

                //重い処理を非同期で行う
                DispatchQueue.main.async {
                    //実施
                    self.predictRslt = predictorIns.startInspect(imageName: self.recentImageName + ".JPG")
                    
                }
            }, label: {
                Text("開始")
            })
        
            //測定中はその旨表示する
            if self.isProgressShowing {
                Color.white
                    .opacity(0.7)
                    .edgesIgnoringSafeArea(.all)
                    .overlay(
                        ProgressView("処理中…")
                            .foregroundColor(.black)
                    )
            }
        }
        .frame(width: 700)
        
        //処理開始時処理
        .onChange(of: self.predictorIns.proccessingStartedFlg, perform: { value in
        
            self.isProgressShowing = true
            
        })
        //処理終了時処理
        .onChange(of: self.predictorIns.proccessingFinishedFlg, perform: { value in
        
            // 処理中画面非表示
            self.isProgressShowing = false
            
            //測定結果がOKであれば
            if self.predictRslt == Constants.RESULT_OK {
                
                ～～～後処理を実施～～～
            }

        })

    }
    
}

↓処理部

import Foundation

class InspectorModel_Crossing: ObservableObject {
    //処理開始を知らせるフラグ(開始するとフラグが変化する)
    @Published var proccessingStartedFlg: Bool = false
    //処理終了を知らせるフラグ(終了するとフラグが変化する)
    @Published var proccessingFinishedFlg: Bool = false
    
    //処理の開始
    func startInspect(imageName: String, uiImageObj: UIImage? = nil) -> Int {
        
        self.proccessingStartedFlg.toggle()

        ～～～すごく重たい処理～～～
        
        self.proccessingFinishedFlg.toggle()
        
        return Constants.RESULT_OK
    }
    
}

補足情報（FW/ツールのバージョンなど）

Xcode：Ver.12.3
シミュレータiOS：14.3
Swift：Ver.5.3.2

Answer 1

次の2つの処理を別のスレッドで実行するように修正すると、View側に proccessingStartedFlg の変更が意図したタイミングで伝わるようになります。

• フラグ proccessingStartedFlg を立てる処理
• 重たい処理

以下にコードの修正例を示します。
重たい処理は Dispatch.main.async で非同期に実行するようにします。そして、その重たい処理が終わった後に startInspect メソッドの呼び出し元に結果コード Constants.RESULT_OK を返すために、 completion というパラメータを追加しています。

class InspectorModel_Crossing: ObservableObject {
    //処理開始を知らせるフラグ(開始するとフラグが変化する)
    @Published var proccessingStartedFlg: Bool = false
    //処理終了を知らせるフラグ(終了するとフラグが変化する)
    @Published var proccessingFinishedFlg: Bool = false
    
    //処理の開始
-    func startInspect(imageName: String, uiImageObj: UIImage? = nil) -> Int {
+    func startInspect(imageName: String, uiImageObj: UIImage? = nil, completion: ((Int) -> Void)? = nil) {

        self.proccessingStartedFlg.toggle()

-        ～～～すごく重たい処理～～～
-
-        self.proccessingFinishedFlg.toggle()
-
-        return Constants.RESULT_OK
+        DispatchQueue.main.async {
+            ～～～すごく重たい処理～～～
+            
+            self.proccessingFinishedFlg.toggle()
+            
+            completion?(Constants.RESULT_OK)
+        }
    }

このメソッドの呼び出す側の修正は以下のようになります。
startInspect メソッドの中で重たい処理を非同期実行するようにしたため、こちらでは DispatchQueue.main.async を使わずに直接startInspect メソッドを呼び出すようにしています。
また、 completion のパラメータから得た結果コードを predictRslt プロパティに代入するように変更しています。

    var body: some View {
        ZStack {
            
            Button(action: {
-                //重い処理を非同期で行う
-                DispatchQueue.main.async {
-                    //実施
-                    self.predictRslt = predictorIns.startInspect(imageName: self.recentImageName + ".JPG")
-
+                //実施
+                predictorIns.startInspect(imageName: self.recentImageName + ".JPG") { result in
+                    self.predictRslt = result
                }
            }, label: {
                Text("開始")
            })

---

追記：
ちょっと長くなってしまいますが、質問に掲載されていたコードをなるべくそのまま使う形にて修正案の動作確認していたときのコードを以下にて共有します。（重たい処理は仮に sleep(10) としています。）

import SwiftUI

struct Constants {
    static let RESULT_OK: Int = 0
}

struct ContentView: View {
    
    //プログレスビュー表示フラグ
    @State var isProgressShowing: Bool = false
    //処理クラス
    @ObservedObject var predictorIns: InspectorModel_Crossing = InspectorModel_Crossing()
    //処理結果
    @State var predictRslt: Int = 0
    
    var recentImageName = "hoge"
    
    var body: some View {
        ZStack {
            
            Button(action: {
                //実施
                predictorIns.startInspect(imageName: self.recentImageName + ".JPG") { result in
                    self.predictRslt = result
                }
            }, label: {
                Text("開始")
            })
            
            //測定中はその旨表示する
            if self.isProgressShowing {
                Color.white
                    .opacity(0.7)
                    .edgesIgnoringSafeArea(.all)
                    .overlay(
                        ProgressView("処理中…")
                            .foregroundColor(.black)
                    )
            }
        }
        .frame(width: 700)
        
        //処理開始時処理
        .onChange(of: self.predictorIns.proccessingStartedFlg, perform: { value in
            
            print("proccessingStartedFlg changed (value=(value))")

            
            self.isProgressShowing = true
            
        })
        //処理終了時処理
        .onChange(of: self.predictorIns.proccessingFinishedFlg, perform: { value in
            
            print("proccessingFinishedFlg changed (value=(value))")
            
            // 処理中画面非表示
            self.isProgressShowing = false
            
            //測定結果がOKであれば
            if self.predictRslt == Constants.RESULT_OK {
                
//                ～～～後処理を実施～～～
            }
            
        })
        
    }
    
}

class InspectorModel_Crossing: ObservableObject {
    //処理開始を知らせるフラグ(開始するとフラグが変化する)
    @Published var proccessingStartedFlg: Bool = false
    //処理終了を知らせるフラグ(終了するとフラグが変化する)
    @Published var proccessingFinishedFlg: Bool = false
    
    //処理の開始
    func startInspect(imageName: String, uiImageObj: UIImage? = nil, completion: ((Int) -> Void)? = nil) {
        
        self.proccessingStartedFlg.toggle()
        
        DispatchQueue.main.async {
//            ～～～すごく重たい処理～～～
            sleep(10)

            self.proccessingFinishedFlg.toggle()
            
            completion?(Constants.RESULT_OK)
        }
    }
    
}

Comments

[eleele28]

ご回答ありがとうございます！
例示の通り試してみましたが、やはり、重たい処理終了後に2つまとめてonChangeにてフラグ変化を拾ってしまいます。
例示のコードではproccessingStartedFlgをtoggleするのはView側のコンテキストのままでしたので、proccessingStartedFlgのtoggleする処理も別途DispatchQueue.main.async節で囲ってみたものの、やはり状況変わりません。
ほかにも別コンテキストで実行しなければならない処理があるのでしょうか？

[__k_san__]

ご確認ありがとうございます。
私が手元で動作確認してみたときには重たい処理の開始時にproccessingStartedFlgについてのonChangeが呼ばれて、重たい処理の終了時にproccessingFinishedFlgについてのonChangeが呼ばれており、2つまとめて（ほぼ同時に）呼ばれるということはありませんでした。
（※　Xcode 13.1、iOSシミュレータ（iPhone 13, iOS 15.0）で確認しました。）

回答の末尾にそのときのコードを追記しましたので、そちらも参考にしていただければと思います。

[eleele28]

返答ありがとうございます。
確かに、ご例示のコードをウチの環境でも動かしてみたところ、意図通りに動作いたしました。
本番のコードはこちらが上記で提示したものにいろいろな画面パーツが肉付けされているため、どこが悪さをしているのかのか検証してみたいと思います。

Answer 2

処理開始のButtonを置く階層によって、うまく動作する場合と動作しない場合があることが分かりました。

まずView内を以下のよう（ご回答者例示のコード）にした場合、意図通りに動きます。

ZStack {

    Button(action: {
        //実施
        predictorIns.startInspect(imageName: self.recentImageName + ".JPG") { result in
            self.predictRslt = result
        }
    }, label: {
        Text("開始")
    })

    //測定中はその旨表示する
    if self.isProgressShowing {
        Color.white
            .opacity(0.7)
            .edgesIgnoringSafeArea(.all)
            .overlay(
                ProgressView("処理中…")
                    .foregroundColor(.black)
            )
    }
}

Buttonを置く階層をだんだん深くし、以下のようにTabViewの中に置いたとたん、意図通りに動かなくなりました。

ZStack {
    VStack {
        TabView(selection: self.$tabSelection,
                content:  {
                    
            VStack {
            	Button(action: {
	                //実施
	                predictorIns.startInspect(imageName: self.recentImageName + ".JPG") { result in
	                    self.predictRslt = result
	                }
	            }, label: {
	                Text("開始")
	            })
            }
            .tabItem {
			    VStack(alignment: .center) {
			        
			        Text("Tab1")
			    }
		})
	}
}

根本的な原因は不明のままですが、startInspect()をTabViewの中以外の階層で呼び出せば動くので、以下のように対応しました。
・自画面内で処理開始イベントを通知するためのStateObjectを宣言
・そのStateObjectのonChangeを拾い、startInspect()を呼び出し

import SwiftUI

struct Constants {
    static let RESULT_OK: Int = 0
}

//この画面内でイベントを飛ばすためのデータクラス
class InspectStartEvent: ObservableObject {
	@Published var inspectStartFlg = false
}

struct ContentView: View {

    //プログレスビュー表示フラグ
    @State var isProgressShowing: Bool = false
    //処理クラス
    @ObservedObject var predictorIns: InspectorModel_Crossing = InspectorModel_Crossing()
    //画面内でのイベントを受け取るためのオブジェクト
    @StateObject var inspectStartEvent: InspectStartEvent = InspectStartEvent()
    //処理結果
    @State var predictRslt: Int = 0

    var recentImageName = "hoge"

    var body: some View {
		ZStack {
		    VStack {
		        TabView(selection: self.$tabSelection,
		                content:  {
		                    
		            VStack {
		            	Button(action: {
		            		//処理開始イベントを自分に投げる
			                self.inspectStartEvent.inspectStartFlg.toggle()
			            }, label: {
			                Text("開始")
			            })
		            }
		            .tabItem {
					    VStack(alignment: .center) {
					        
					        Text("Tab1")
					    }
				})
			}
		}
        .frame(width: 700)
        //処理開始イベント
        .onChange(of: self.inspectStartEvent.inspectStartFlg, perform: { value in
            //実施
            predictorIns.startInspect(imageName: self.recentImageName + ".JPG") { result in
                self.predictRslt = result
            }
        })

        //処理開始時処理
        .onChange(of: self.predictorIns.proccessingStartedFlg, perform: { value in

            print("proccessingStartedFlg changed (value=(value))")


            self.isProgressShowing = true

        })
        //処理終了時処理
        .onChange(of: self.predictorIns.proccessingFinishedFlg, perform: { value in

            print("proccessingFinishedFlg changed (value=(value))")

            // 処理中画面非表示
            self.isProgressShowing = false

            //測定結果がOKであれば
            if self.predictRslt == Constants.RESULT_OK {

//                ～～～後処理を実施～～～
            }

        })

    }

}