How can I use a loading icon with a Web Viewer

Questions about Thunkable
1

Dear All,
anyone knows if it is possible to load an HTML page that I’ve downloaded from a Web API get request into the web viewer?

In the following you can see the code I developed based on what I read from the community, but unfortunately it does not work and I wanted to ask if anyone can help me with this.

The reason I decided to implement this way is because of the user experience, in fact I prefer to show a loading icon while the web page is loading.

The result of the web view is a white page, while the log shows that the html file is downloaded correctly.

image

Thanks in advance.

2 Likes
2

I don’t see you using Any object blocks with the Response block.
Web API’s always return a JSON string.
That may be why it’s not working

1 Like
3

The Data schema URI only works with Android devices which will make your code not compatible with iOS devices.

1 Like
4

May I ask why you want to retrieve a page, example https://www.ggogle.com using a Web API to view it in a Web Viewer. Wasn’t is easier to directly use the URL into the Web Viewer without the step of getting the HTML data from the Web API?

5

Thank you @muneer for your feedback. The reason is that I need to show a loader icon to the user while the web page is loading.

Unfortunately, the web viewer alone does not have this feature, so I tried a different solution that is to retrieve the html via a web api and, once I get the response, to stop the loader and show the web page.

Maybe there is another and smarter solution to reach the same result and I would appreciate if anyone can show me how to do that.

The point is that without the loader, the user experience is very poor and the app might not be competitive on the market.

Thank you.

6

Hey @dani19130a

Do you have control over the code in the website you are loading?

1 Like
7

Hey @jared unfortunately I don’t…

1 Like
8

The reason I ask is that if you did have that control, you could inject a script that passes a message to the web viewer when the page is finished loading.

I’m not sure how much the method you are using would speed things up. You would still need to reload any asset that was only URL linked. You’d probably have to still fetch the CSS and JS scripts/libraries after the initial HTML was loaded.

One potential would be loading the page in the background while the user does other activities and then making the web viewer visible at the appropriate time. However, if you are simply wrapping a website to which you don’t control the host HTML, you will load at the speed of the device/device’s internet.

1 Like
9

What you can do is to pass the URL into an iFrame of your HTML file and use the onLoad event to pass back to your app when the load is complete.

2 Likes
10

I decided to use a very brutal workaround here, I officially apologize with the entire community of developers :rofl: :rofl: :rofl:

When the screen Opens the loader is active, while the webviewer is not visibile but it is set in order to load the webpage XXX.

Then I submit a GET request to the same endpoint XXX and when it receives the response I make the webpage visible and hide the loader.

So the GET request is used as a way to raise an event that allows to block the loader and show the web page.

Very bad, I know, but it is working and the user experience is acceptable now.

image
image757×318 24.8 KB

4 Likes
11

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.