Activity indicator while loading a webview url

Is there a way to display an activity indicator while loading a webview url?
Or, alternatively, show an activity indicator for an amount of time (e.g. 1.5 sec) on top of the webview?

FYI: I managed already something with a lottie file that I repeat e.g. 2 times.
But it would be nice to hide if I could hide it based on a webview event.

There is an advanced feature of Kodika called protocols that you can use.
Protocols are a group of Functions that are called automatically when an event happens, for example, when WebView finishes loading.

In order to find these protocols you will need to:

  1. Add a WebView to your screen
  2. Go to CODE tab on top left
  3. Switch to Protocols tab
  4. Select WebViewDelegateProtocol

Most of the Design Elements have their own protocols. Webview specifically has 3 functions/events

The one that you want is the webView:didFinishNavigation
After you add this Function, you can open it and add any Code Block that you want to be executed when WebView finishes loading successfully, for example, hide/stop of an activity indicator.

Great! This works and also helped me as a newbie to understand how the Kodika Code Blocks editor works. For other newbies, I have added what I did below:

  1. I have added a web view with a URL using https://deelay.me/ so I play with a delay and see the result.
  2. I have added an Activity Indicator and set the switch Hides when stopped
  3. I gave it a Display Name and set it to be Visible in Code as below.
  4. I switch to CODE > Protocols and added the webView:didFinishNavigation protocol as sugested by Kostas.
  5. Click Edit on the added protocol, searched in the Blocks for a block that stops the animation and added my activity indicator that I have added to code in step 3. It looks like below:
  6. The previous step made the code to stop the animation, but we also need to make it spin when the view is loaded.
    In Protocols > Recommended functions, there is a protocol viewDidAppear. Add that and edit it.
  7. Add the blocks to start the animation of the same Activity Indicator. It looks like this:

And now we have an Activity Indicator that starts spinning as soon as the view appears and stops spinning and is hidden when the URL is loaded.

1 Like