【SwiftUI】ぐるぐると回るインジゲーターを表示させたい

前提

ここに質問の内容を詳しく書いてください。
【スレッドを追加】を押すと
ぐるぐると回るインジゲーターを表示させたいのですが、
色々参考サイトを見ても表示されず、
【スレッドを追加】をクリックすると、
動作も重く、インジゲーターも表示されません。

実現したいこと

【スレッドを追加】をクリックすると、
インジゲーターを表示させたい。

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

【スレッドを追加】を押すと
ぐるぐると回るインジゲーターを表示させたい

該当のソースコード

Swift
1import SwiftUI
2import NCMB
3
4struct AddThreadView: View {
5    @Environment(\.presentationMode) private var presentationMode
6    @State private var title = ""
7    @State private var description = ""
8    @State private var showingPicker = false
9    @State private var image: UIImage?
10    @State var isPresentedProgressView = false
11    var body: some View {
12        VStack {
13            NavigationView {
14                Form {
15                    TextField("スレッドのタイトルを入力してください", text: $title)
16                    TextField("スレッドの紹介文を入力してください", text: $description)
17                    Button(action: {
18                        showingPicker.toggle()
19                    }) {
20                        Text("画像追加")
21                    }
22                    if let image = image {
23                        Image(uiImage: image)
24                            .resizable()
25                            .aspectRatio(contentMode: .fit)
26                    }
27                    Button(action: {
28//                        manageProgress()
29                        add()
30                    }) {
31                        ZStack {
32                            Text("スレッド追加")
33                            if isPresentedProgressView {
34                                Color.gray.opacity(0.5)
35                                ProgressView("読み込み中")
36                            }
37                        }
38                    }
39                }
40            }
41        }
42        .sheet(isPresented: $showingPicker) {
43            ImagePickerView(image: $image, sourceType: .library)
44        }
45    }
46    
47    private func manageProgress() {
48        // ProgressView 表示
49        isPresentedProgressView = true
50        // 3秒後に非表示に
51        DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
52            self.isPresentedProgressView = false
53        }
54    }
55    
56    
57    private func add() {
58        let thread = NCMBObject(className: "Thread")
59        let user = NCMBUser.currentUser
60        var acl = NCMBACL.empty
61        acl.put(key: "*", readable: true, writable: false)
62        acl.put(key: user!.objectId!, readable: true, writable: true)
63        thread.acl = acl
64        if let image = image {
65            let uuid = UUID()
66            let fileName = "\(uuid).jpg"
67            let photo = NCMBFile(fileName: fileName, acl: acl)
68            _ = photo.save(data: image.jpegData(compressionQuality: 80.0)!)
69            thread["fileName"] = fileName
70        }
71        thread["title"] = title
72        thread["description"] = description
73        let results = thread.save()
74        if case .success(_) = results {
75            presentationMode.wrappedValue.dismiss()
76        } else {
77            print("Error")
78        }
79    }
80}
81
82struct AddThreadView_Previews: PreviewProvider {
83    static var previews: some View {
84        AddThreadView()
85    }
86}
87

試したこと

ProgressView("読み込み中")
↓↓↓
DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
self.isPresentedProgressView = false
}

で、秒数指定で表示させたいのですが、
この記述でも、
【スレッドを追加】をクリックすると、
動作が固まり、
最後に一瞬だけ
ProgressView("読み込み中")が
表示されます、、、、、、（１秒も表示されない）

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

ProgressViewに関する情報

参考サイト

ずっと悩んでますが
解決できません、

どうかお力をお貸しいただけますと
非常に嬉しいです。
よろしくお願い致します。

hoshi-takanori

2023/01/05 10:28

NCMB がよく分かりませんが、もしかして add() が非同期になってなかったりするのかも？

SA-KYO

2023/01/05 23:54

ご回答ありがとうございます。非同期になっていないとぐるぐるは表示されないでしょうか？（ ; ; ）

hoshi-takanori

2023/01/06 02:31

add メソッドが終了しないと表示は更新されませんので…。

SA-KYO

2023/01/06 07:34

ご回答ありがとうございます！他の方のアドバイスもあり、 hoshi-takanori様のご教授もあり、無事解決できました！ありがとうございました！

回答1件

ベストアンサー

manageProgress メソッドを
次の内容にすることでうまくいかないでしょうか？

もしかしたら add メソッドを
DispatchQueue.global().async {}
で囲う必要もあるかもしれません。

Swift
1    private func manageProgress(){
2        DispatchQueue.global().async {
3            isPresentedProgressView = false
4            Thread.sleep(forTimeInterval: 3)
5            isPresentedProgressView = true
6        }
7    }

投稿2023/01/06 02:33

uni2

総合スコア182

回答へのコメント

SA-KYO

2023/01/06 03:19

ありがとうございます！！！ご教授いただきました通りでした！ add メソッドを DispatchQueue.global().async {} で囲って、 private func manageProgress()　の記述は private func manageProgress() { // ProgressView 表示 isPresentedProgressView = true // 3秒後に非表示に DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) { self.isPresentedProgressView = false } } のままにするとボタンをクリックした瞬間に読み込みのぐるぐる（インジゲーター）が表示されました！今回ご教授いただきました、 DispatchQueue.global().async {}　についても学習していこうと思います！本当に助かりました！！ありがとうございました！

uni2

2023/01/06 04:09 編集

それならばコメント欄の方の意見が正しかったようですね。私はコメント欄の方とは別人なのでベストアンサーを横取りしてしまったかもしれません。追記1： manageProgress メソッドを書き換えないで正常に機能している場合は DispatchQueue.global() の代わりに DispatchQueue.global(qos: .utility) を使った方が良いかもしれません。 https://ticklecode.com/swfitgdp/ 追記2：おせっかいかもしれませんが、可能ならば「3秒経過している」「addメソッドが最後まで終了している」の2条件を満たしている時にインジゲーターを非表示にすると良いかもしれません。 isPresentedProgressView1 isPresentedProgressView2 のように変数を2個に増やすことで簡単に変更できると思われます。

SA-KYO

2023/01/06 04:20 編集

重ねでのご回答ありがとうございます！ isPresentedProgressView1 isPresentedProgressView2 変数を2個作って,増やすやり方、やってみたいと思います！おせっかいだなんてとんでもございません！本当にありがたく嬉しいです！！早速やってみます！ ※回答の件についてお気遣いさせてしまし申し訳ございません。。。自分が理解してないばかりに申し訳ございませんでした。。。