Javascript Loading Bar or Loading Icon in NativeScript Webview

I am a newcomer to Nativescript and I have a WebView that loads an external website. I want to display an icon or bar while the WebView URL is loading.

This is my XML VIEW:

<Page class="page"
navigatingTo="pageLoaded"  
xmlns="http://schemas.nativescript.org/tns.xsd"
actionBarHidden="true"
>

    <GridLayout  >

    <Image src="~/img/loading1.gif" width="75%" class="logo"  visibility="{{ showDetails? 'visible' :  'collapsed' }}" />

    <WebView id="webView" loaded="onWebViewLoaded" loadFinished="loadFinished" src="preload.html"   visibility="{{ showDetails? 'collapsed' :   'visible'}}" />
</GridLayout>

My Controller 

    var webViewModule = require("ui/web-view");
var observable = require("data/observable");
var pageData = new observable.Observable();




function pageLoaded(args) {
    var page = args.object;

    pageData.set("showDetails",true );
    args.object.bindingContext = pageData; 

    var web = page.getViewById("webView");     
    web.src = "http://icon-dz.com/sap/pw";

}
function loadFinished(args) {

    pageData.set("showDetails", false );
    args.object.bindingContext = pageData; 


}

function onWebViewLoaded(args) {

    pageData.set("showDetails", false);
    args.object.bindingContext = pageData; 


}
exports.onWebViewLoaded = onWebViewLoaded ;
exports.loadFinished  = loadFinished ; 
exports.pageLoaded = pageLoaded;

Could you provide some insight into how this functionality should work exactly?

javascriptwebviewnativescript

Answer №1

Can you explain the distinction between loadFinished() and onWebViewLoaded()? They appear to perform the same function in your JS code🤷‍♂️

To enhance user experience, consider using an Activity Indicator instead of a gif. It's important to correct any logical errors such as confusion between loadFinished<>onWebViewLoaded. For guidance on integrating an Activity Indicator with Webview, refer to the documentation here.

I recommend reviewing certain topics in the docs like; dataBinding for further insight.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to eliminate buttons upon clicking, but they persistently reappear (JavaScript, HTML)

I have encountered an issue with buttons in my table that I am struggling to resolve. Each row in the table contains a "Pack" action button, which when clicked, is removed to prevent accidental double-packing of items. Everything was functioning smoothly ...

javascriptjqueryhtmluser-interface

Storing items in an array within the local storage

I have been experimenting with different ways to add objects to an array in localstorage without overwriting it, but I haven't found a successful solution yet. My current code stores objects in an array, but it keeps overwriting itself. Can someone p ...

javascriptlocal-storage

I am looking to transmit information to the controller using AJAX

ajax console.log(total);//10 console.log(number);//4 var form = { total:total, number:number } $.ajax({ url: 'items/cart/update', type: 'POST', data:form }); Spring MVC controller @ResponseBody @P ...

javascriptjavajqueryajaxspring-boot

Discover each *distinct arrangement* from a given array

I'm looking to generate unique combinations of element positions in a JavaScript array. Here's the array I am working with: var places = ['x', 'y', 'z']; The combinations I want are: [0,1], [0,2], [1,2]. Current ...

javascriptarrayspermutation

Issue with Angular's date filter when used in combination with ng-repeat

JavaScript Controller app.controller("MarketController", function ($scope) { $scope.dates = [ { date: Date.parse("01/01/1999"), value: 123.456 }, { date: Date.parse("02/05/2004"), value: 789.123 } ]; }); HTML Template <li ng-r ...

javascriptangularjs

Leverage the router through the getServerSideProps method

My goal is to automatically redirect the user to the login page if their token has expired. I need to handle this in the getServerSideProps method where I make a request to the server for data. If the request is unauthorized, I want to use the useRouter ho ...

javascriptreactjsnext.jsnext-router

Using URL parameters with Select2

Currently, I am in the process of setting up tagging and utilizing ajax to display the most commonly used tags. To accomplish this, I decided to employ the Select2 plugin. However, I encountered a roadblock when attempting to retrieve my JSON Data in my ja ...

javascriptjsonajax

The router.get function seems to be malfunctioning, however when using the router.get function with an id

When I call http://localhost:5000/surveycreate/4, it successfully redirects me to the surveypage.html page. However, calling http://localhost:5000/surveycreate does not work as expected. Instead of redirecting me, it leads me back to my main index.js file ...

javascriptexpressweb-applicationsroutes

What could be causing the discrepancy between the assigned value in the UI and the value of the ref object, even though they appear to be the same in the console when viewed in the useEffect hook

By the end of the useEffect, inputValue is stored in previousInputValue.current. Since the useEffect runs during rendering or rerendering, I expected the value of previousInputValue.current in the second <h2> tag to be the same as inputValue. How is ...

javascriptreactjs

The ASP.NET platform is experiencing issues in displaying the Bootstrap 5 modal

Whenever I try to click the button that triggers the bootstrap modal, I encounter an error. I expected to be able to open and close the modal without needing any extra JavaScript code. https://i.sstatic.net/OMg6b.png Index.cshtml <button class="r ...

javascriptjqueryasp.net-mvcbootstrap-modalbootstrap-5

Concealing div containers and eliminating gaps

Looking for a way to filter div boxes using navigation? Check this out: <ul> <li><a href="javascript:void(0);" data-target="apples">Appels</a></li> <li><a href="javascript:void(0);" data-target="bananas">Ban ...

javascriptjquerycss

Unable to pass an event parameter using my this.handleChange function in react-native

Encountering an issue with the error message "undefined is not an object (evaluating 'event.preventDefault)" It appears that I am unable to pass an event parameter to the handleChange function in my child component, which is being rendered in the par ...

javascriptreactjsreact-nativestatereact-props

Develop an Angular resolver that can be utilized across various scenarios

Im searching for a method to apply a single angular route resolve to all of my routes, each with different parameters: currently, my setup looks like this: { path: 'user/:any', component: UserprofileComponent, resolve ...

javascriptangularroutesresolver

tips for enabling communication between the server and client

As someone who is new to the world of web development, please bear with me as I ask a question out of curiosity. I am wondering if there is a method for the server to push messages to clients. For instance, imagine a client's webpage featuring a news ...

javascriptclient-server

Finding the distance between two points in JavaScript requires a simple formula

Here is a code snippet that generates two TRACER points and displays them on a map, as well as shows the union between the two points. <?php $latitudInicio = $_GET['latitudInicio']; $longitudInicio = $_GET['longitudInicio']; $latit ...

javascriptgoogle-maps

Utilize React to Effectively Control Multiple Audio Files on a Single Page, Ensuring Only One Plays at a Time with Function

I am currently working on a new React app that includes multiple music cards on the same page. I am looking to modify the state of the previous card before updating the state of the new card. Essentially, I aim to pause the audio playing in the previous ca ...

javascriptreactjswebaudiomedia-player

Sort Through Hexadecimal Color Codes

I am faced with a challenge of sorting through a vast array of hex colors (over 6500) and I need to eliminate the ones that are excessively dark or overly bright. Is there a distinguishing feature in the hex codes of dark and bright colors that can help m ...

javascripthtmlcsshex

Guide on retrieving the index of the selected row in Ionic 2

I have successfully retrieved data from a URL in JSON format and displayed it on an HTML page. You can see the output in the image below: https://i.sstatic.net/UEVvD.png Now, I am looking to enhance the functionality by allowing users to click on a speci ...

javascriptangularionic-frameworkionic2

AngularJS is capable of executing conditional logic using the if/else statement

I am attempting to set the inputLanguage value to 'en' and encountering an error that says english is not defined. Here is the code snippet from my alchemy.js file: module.exports = function(Alchemy) { Alchemy.language = function(inText, inp ...

javascriptangularjsnode.js

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

javascripthtmlgoogle-chrome