# How do I optimize these GUI

**URL:** <https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524>\
**Category:** Questions\
**Tags:** gui\
**Created:** [July 21, 2021, 1:37pm UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524 "2021-07-21T13:37:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\
**Post date:** [July 21, 2021, 1:37pm UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/1 "2021-07-21T13:37:41Z")

</div>

Hi All. I need to create a lot of advanced texture GUI tags dynamically. It’s going to be hundreds.

my playground demo [Babylon.js Playground](https://www.babylonjs-playground.com/#2NR585)  
This way of creation will lock my website. What’s a good way to improve it ？

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 21, 2021, 2:29pm UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/2 "2021-07-21T14:29:08Z")

</div>

Adding @msDestiny14

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [July 21, 2021, 5:13pm UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/3 "2021-07-21T17:13:26Z")

</div>

The biggest slow down is going to be those image loadings. (The GUI itself should not be that expensive). I wonder if having some kind of await for loading the image and then you can have a loading screen in the meantime.

Can’t think of anything else specific at the moment.

---

<div class="post-metadata">

**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\
**Post date:** [July 22, 2021, 1:54am UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/4 "2021-07-22T01:54:48Z")

</div>

My understanding was that I’ve reloaded images many times, causing it to get stuck .Is it possible to load these textures only once and reuse them? My users don’t like loading screen 😅 So I have to optimize it .

---

<div class="post-metadata">

**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\
**Post date:** [July 26, 2021, 5:17am UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/5 "2021-07-26T05:17:59Z")

</div>

If I want to reuse these textures, Should I have to give up the GUI ?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 26, 2021, 2:04pm UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/7 "2021-07-26T14:04:16Z")

</div>

@musk no matter the solution you chose GUI vs already baked, loading 100s of textures will take time ☹

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [July 26, 2021, 7:52pm UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/9 "2021-07-26T19:52:48Z")

</div>

I think your best bet here is to progressively load in your GUI, as @msDestiny14 alluded to. Is that an option for you? Maybe you can have the most crucial textures load in first and then slowly populate the rest of the screen.

The UX field has put a ton of effort into figuring out ways to make loading less painful, there are lots of articles on this subject such as [this one](https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e). Probably the worst thing you can do is lock the screen and give the user zero feedback about what’s going on. You definitely want the user to know that the loading is progressing, and if possible, make parts of the UI available right away.

---

<div class="post-metadata">

**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\
**Post date:** [July 27, 2021, 6:28am UTC](https://forum.babylonjs.com/t/how-do-i-optimize-these-gui/22524/10 "2021-07-27T06:28:41Z")

</div>

Thank you all for your reply. @sebavan ‘s reply gave me a hint . Loading texture will take time.its inevitable. So create instance of the plane . It’s my solution now. But I had to give up display words. [https://www.babylonjs-playground.com/#2NR585#2](https://www.babylonjs-playground.com/#2NR585#2)  
hey~ @DarraghBurke Thank you for showing me places I’ve never noticed before .
