【SwiftUI】WebViewにローディング画面を表示する

はじめに

WebViewの読み込み中にローディング画面を表示させます。

WebViewをSwiftUIで使うためのコードは以下の記事のものを使用します。

くるくる	進捗バー

くるくる

import SwiftUI
import Combine
import WebKit

struct ContentView: View {
    @StateObject var viewModel = ViewModel()
    var body: some View {
        WebView(url: URL(string: "https://qiita.com/SNQ-2001")) { webView in
            viewModel.loadingObserver(webView)
        }.overlay {
            if viewModel.isLoading {
                ProgressView().progressViewStyle(.circular)
            }
        }
    }
}


final class ViewModel: ObservableObject {
    @Published var isLoading = false
    
    func loadingObserver(_ webView: WKWebView) {
        webView.publisher(for: \.isLoading)
            .assign(to: &$isLoading)
    }
}

進捗バー

import SwiftUI
import Combine
import WebKit

struct ContentView: View {
    @StateObject var viewModel = ViewModel()
    var body: some View {
        ZStack(alignment: .top) {
            WebView(url: URL(string: "https://qiita.com/SNQ-2001")) { webView in
                viewModel.loadingObserver(webView)
            }
            
            if viewModel.isLoading {
                ProgressView(value: viewModel.estimatedProgress).progressViewStyle(.linear)
            }
        }
    }
}


final class ViewModel: ObservableObject {
    @Published var isLoading = false
    @Published var estimatedProgress = 0.0
    
    func loadingObserver(_ webView: WKWebView) {
        webView.publisher(for: \.isLoading)
            .assign(to: &$isLoading)
        
        webView.publisher(for: \.estimatedProgress)
            .assign(to: &$estimatedProgress)
    }
}

おわり

UIKitでWebViewにローディング画面を表示する記事がいくつかありましたが、SwiftUIでの記事は見つからなかったので記録しておきます。