iosswiftuiwebviewwkwebviewuiviewrepresentable

WKWebview/UIViewRepresentable - Hide Loading... text while webview is loading


I have the following UIViewRepresentable to load a webview.

struct SViewerWebView: UIViewRepresentable{
    var url: String
    var token: String
    @Binding var isLoading: Bool
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> WKWebView {
        let webConfiguration = WKWebViewConfiguration()
        let webView = WKWebView(frame:.zero,configuration:webConfiguration)
        webView.allowsBackForwardNavigationGestures = true
        webView.isInspectable = true
        webView.navigationDelegate = context.coordinator
        return webView
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let urlforRequest = URL(string: url) else {
            print("❌ Invalid URL:", url)
            return
        }
        var request = URLRequest(url: urlforRequest)
        request.addValue("Bearer \(token)", forHTTPHeaderField: "Authorization")
        
        print("🔄 Loading URL:", url)
        print("🛠 Headers:", request.allHTTPHeaderFields ?? [:])
        
        uiView.load(request)
    }
    
    //coordinator
    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: SViewerWebView

        init(_ parent: SViewerWebView) {
            self.parent = parent
        }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            DispatchQueue.main.async {
                self.parent.isLoading = false  // Hide loading when page loads
            }
        }

        func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
            DispatchQueue.main.async {
                self.parent.isLoading = false  // Hide loading on error
            }
        }
    }
}

This is the state before the content loads. At this point I'm displaying a ProgressView() loading

The problem comes in the step between screenshot 1 and 3:

as you can see below, before navigating to the webview content, there is a default loading text that still showing up. Apparently, it seems to be the default behavior from the wkwebview. How can I hide that text status? loading text forge webview

my view component:

var body: some View {
        ZStack{
            SViewerWebView(url: webUrl,token: TokenManager.getToken()!,isLoading: $isLoading)
            if isLoading{
                VStack {
                    ProgressView()
                    .progressViewStyle(CircularProgressViewStyle())
                    .scaleEffect(1.5)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
            }
        }
        .ignoresSafeArea()
    }

Solution

  • Apologies for the inconveniences but after exploring the loaded website I found that the loading text belonged to it.