Why hideLoadingUI runs when it is not called?

I want to create a custom Loading Page. I have 2 classes running the operation.


export class CustomLoading{
    scene: Scene;
    engine: Engine;
    loadingScreen: CustomLoadingScreen;
    lightTubes!: AbstractMesh[];
    models!: AbstractMesh[];
    ball!: AbstractMesh;
        private canvas: HTMLCanvasElement,
        private loadingBar: HTMLElement,
        private precentLoaded: HTMLElement,
        private Loader: HTMLElement,
        this.engine = new Engine(this.canvas, true);
        this.loadingScreen = new CustomLoadingScreen(this.loadingBar, this.precentLoaded, this.Loader);
        this.engine.loadingScreen = this.loadingScreen;
        this.scene = this.CreateScene();


    CreateScene():Scene {
        const scene = new Scene(this.engine);
        const camera = new FreeCamera('camera', new Vector3(0,1,-8), scene);
        camera.speed = 0.25;

        const envTex = CubeTexture.CreateFromPrefilteredData("./environments/wide_street.env", scene);
        scene.environmentTexture = envTex;
        scene.createDefaultSkybox(envTex, true);

        return scene; 

    async createEnvironment(): Promise<void> {
        const {meshes} = await SceneLoader.ImportMeshAsync("", "./models/","LightingScene.glb");

        this.models = meshes;
        this.lightTubes = meshes.filter(
            (mesh) =>
            mesh.name === "lightTube_left" || mesh.name === "lightTube_right"
        // this.engine.hideLoadingUI();


export class CustomLoadingScreen implements ILoadingScreen{
    loadingUIBackgroundColor!: string;
    loadingUIText!: string;

        private loadingBar: HTMLElement,
        private precentLoaded: HTMLElement,
        private Loader: HTMLElement
    displayLoadingUI(): void{
        this.loadingBar.style.width = '0%';
        this.precentLoaded.innerText = '0%';

    hideLoadingUI = () => {
        this.Loader.id = 'loaded';

I don’t call hideloadingUI in CustomLoading but it still changes the id of the HTMLElement. what do you think is the problem?

You can see where hideLoadingUI() is called, here:

In your case it seems to be called by dispose() of Engine:

This might be the problem but when I use Babylon’s default loading screen, the id changes at the right time. Is there a way to disable disposing the engine from hiding loading UI?

I think you can just rewrite either hideLoadingUI or dispose of Engine:

engine.hideLoadingUI = () => {
   //copy from original and i.e. add a boolean


engine.dispose = () => {
   //copy from original without hideLoadingUI()

I believe this is the solution. I’ll try it first and mark it as the solution. Thanks

1 Like

You can call engine.hideLoadingUI i.e. after a promise or on scene.ready or actually anywhere in the script where it is not relying on engine creation, delay, loop or dispose. Never had an issue with that.

1 Like

Hello @amr-zayed just checking if you still have questions