# How to add a loading icon to app

**URL:** <https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051>\
**Category:** Web API's\
**Created:** [August 24, 2023, 12:02pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051 "2023-08-24T12:02:02Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 24, 2023, 12:02pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/1 "2023-08-24T12:02:02Z")

</div>

Hi! Iwas wondering how to use the loading icon component. I would like it to run as the user of the app waits for the api to return results to the phone.And of course stop when it comes there. Ill include some of my code…Where i think it should somewhere be:)

 ![loadingicon](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/2/f2540713468e1e46ce6ba9b58d7badbe339f5899.jpeg)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [August 25, 2023, 11:24am UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/2 "2023-08-25T11:24:20Z")

</div>

Hello @hansnielsen350yuwp2  
You can add the loading component and make it invisible. Then add a block to make it visible before you call the API and a block to make it invisible after you receive the response from the API

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/3/b3dbffaa25a6eb0b75e0013498f991d697fb720a.png)

---

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 25, 2023, 1:44pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/3 "2023-08-25T13:44:45Z")

</div>

I dont know if there is a way to do this but. Is there a way to get the loading icon appear after the webviever button is clicked?Cause now it is visible even if the select image button isnt pressed.I mean when a user comes to the screen where the button is its already on…I think it should only be visible when the data is being fetched.

---

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 27, 2023, 11:11am UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/4 "2023-08-27T11:11:34Z")

</div>

…hungover…🙂

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [August 27, 2023, 9:56pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/5 "2023-08-27T21:56:52Z")

</div>

What do you mean by the “webviewer button?” Do you mean a button on a website being displayed in the webviewer?

If it’s a Thunkable button component, then you can show or hide the loading icon when that button is pressed.

---

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 28, 2023, 9:33am UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/6 "2023-08-28T09:33:59Z")

</div>

thx for the reply!Im talking about the webviewer workaround. It has a button but its not the same as the button component, its made with html or javascript. im not sure wich one.Its called the webviewer.

---

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 28, 2023, 2:38pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/7 "2023-08-28T14:38:42Z")

</div>

…or probably both jscript and html…

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [August 28, 2023, 2:51pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/8 "2023-08-28T14:51:14Z")

</div>

I have no idea what that is. Can you post a link to it?

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [August 28, 2023, 4:09pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/9 "2023-08-28T16:09:23Z")

</div>

@hansnielsen350yuwp2 To get the loading icon to appear only after the web viewer button is clicked please make it invisible.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/5/e52d67f92b4c13849df76919358711f670616049.png)  
And add the blocks to update visibility here:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/3/b3dbffaa25a6eb0b75e0013498f991d697fb720a.png)

---

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 28, 2023, 4:49pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/10 "2023-08-28T16:49:14Z")

</div>

First of all thx loannis works like a charm! Then to response to Tatiang; i tried to run a search for the webviewer and got tons of mails, i didnt find a specific post about what it is and does but you can try searching for it if you have better luck than me. Basicly what the webviewer does(in my app anyway) is that it creates a button which then when clicked opens the camera or gallery where you can take a photo and analyze it.For example in my case i use a paid api that identifies mushrooms. The webviever enables me to use the phones camera or a picture from the gallery.Wich then is sent to the database where it is identified. And then returns a result.Hope this makes sence;)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [August 28, 2023, 5:07pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/11 "2023-08-28T17:07:10Z")

</div>

Thanks for the explanation! I just didn’t understand how the button was getting created but that’s play. I’m glad the suggestion is working. If you happen to have an example project you’re willing to share, I’d be curious to see it.

---

<div class="post-metadata">

**Author:** ![hansnielsen350yuwp2](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@hansnielsen350yuwp2](https://community.thunkable.com/u/hansnielsen350yuwp2)\
**Post date:** [August 28, 2023, 5:29pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/12 "2023-08-28T17:29:01Z")

</div>

i dont know. Im selling it at the play store.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:33pm UTC](https://community.thunkable.com/t/how-to-add-a-loading-icon-to-app/2560051/13 "2024-11-08T13:33:32Z")

</div>


