Enabling icon on click not working immediately

Help & Support
1

Hi I’m trying to enable a load icon (entity) as soon as the user clicks a button, but the icon does not appear immediately even though the console prints at the correct time (at the same time as the click). The icon seems to only appear after about a second, just a frame before the next scene loads in. Surely it should appear at the same time as the console.log ? Does enabling take time?

OpenProductPage.prototype.onRelease = function (event) {
    
    this.load_icon.enabled=true;
    console.log("ICON ENABLED");

this.loadScene('Model Viewer Scene');
}
2

Is the asset for the icon loaded before you have enabled it?

Edit: If it isn’t, then what happens is the entity is loaded and the load to the asset is triggered. Then it will render when the asset is loaded.

1 Like
3

Yes, its already loaded but just disabled. Its actually a child of the button that was clicked.

4

if it’s disabled, it’s likely that the assets it needs are not loaded. Those asset loads are triggered when the component is enabled.

5

Its already loaded, ven if not its just a 128 by 128 texture. In the end I just put a little delay before calling the load scene and that seems to have fixed it.

Now however, as soon as the loadscene starts it seems to freeze everything while the scene load takes place…including the load bar.

How would I get around this?

6

Not sure what you mean here. If the asset is loaded but it takes a while to render then there is something else going on.

My guess now without seeing a reproducible is that in the scene that is being loaded, there’s a lot of entities/logic being created/ran on the first frame that’s what’s causing a ‘freeze’ since this is all single threaded.

If this is the case, not much you can do besides adding your own custom loading where entities and logic is ran over several frames/time in chunks

Edit: Now that I read that you put in a delay before the scene load, this is likely to be the cause as it’s creating the new scene before the render call in the current frame is called which means that the icon won’t appear until the scene is loaded and only for a single frame.

7

Okay thanks. I’m going to move my question about loading bars to another topic… :slight_smile:

8

One option might be to separate your loading bar from the actual scenes, so that your can render it over the canvas while Playcanvas does it’s scene change in the background.

@Kulodo133 has a really good example here that I quite like for smooth scene transitions:

https://playcanvas.com/project/779957/overview/asset-helper

Since the loading screens are all image and css elements that live outside of the application, you don’t have to worry about them existing while changing scenes. If you don’t need all of the tools in that asset helper, it is possible to separate the pieces into a more manageable script if you need.

1 Like