Custom Loading Screen

WEB

In Babylon.js, a custom loading screen can be used to display a message, image, or animation to users while the scene and assets are being loaded in the background. This is particularly useful when you have large assets or complex scenes that take time to load, and you want to give users feedback during this period to enhance the user experience.

In Reactylon, the process of implementing a custom loading screen is simplified. You can pass a React component as the loaderOptions.component prop to the Engine component. Reactylon will automatically render this component into an HTML element and manage the logic for showing and hiding the loader.

A basic ending animation is handled out-of-the box, but, if you prefer to customize the ending animation, you can customize the animation by passing your styles to loaderOptions.animationStyle prop.

To display the loader, simply call:

engine.displayLoadingUI();

And to hide the loader, you can use:

engine.hideLoadingUI();

In the example below, the visibility of the custom loader is toggled by pressing any key on your keyboard. To trigger the loader’s appearance or disappearance, simply press a random key, which will toggle its visibility on or off.

<Engine antialias loadingScreenOptions={{
    component: CustomLoadingScreen
}}>
    <Scene><LoaderHandler /></Scene>
</Engine>

const engine = useEngine();
const isLoading = useRef(true);
 
useEffect(() => {
    engine.displayLoadingUI();
    window.onkeydown = () => {
        if (isLoading.current) {
            engine.hideLoadingUI();
            isLoading.current = false;
        }
        else {
            engine.displayLoadingUI();
            isLoading.current = true;
        }
    }
    return () => { window.onkeydown = null }
}, []);

Learn More

For advanced use cases and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen.