Smooth Loading Bar Update Before Scene Progress Callback Fires

🌵 Needle Engine
1

I’m setting the loading bar width based on the data from the scene progress callback, but the issue is that the callback only starts firing after a few seconds. Until then, the progress bar just sits at 0, and once the callback starts, it fills up really fast.

Is there a better way to handle this or make the loading bar feel smoother from the beginning?

 switcher.removeEventListener("progress", handleSceneProgress);
const handleSceneProgress = (e) => {
    const loadingPercent: number = e.loaded / e.total;
    if (isInitialLoad.current === 0) {
      setLoadingProgress(loadingPercent);
    }
    setSceneLoadingProgress(loadingPercent);
    if (loadingPercent === 1) {
    }
  };
2

Hi Ashok!

To create a smoother loading bar experience that provides feedback before the scene progress callback starts firing, you can implement a method to give a preliminary progress update. This could be based on the estimated time it takes to load resources or a random slow increase until the actual loading data starts coming in.

Here’s a refined plan and the corresponding code:

Plan

  1. Create a state variable, estimatedProgress, which starts at 0.
  2. Increase the estimatedProgress at intervals (e.g., every 100 ms) until the actual scene progress callback provides real data.
  3. Within the handleSceneProgress, set the loadingPercent from the callback but keep using estimatedProgress until the first update from the callback.
  4. Transition smoothly between estimatedProgress and the actual loading percentage.

Implementation

let estimatedProgress = 0;
const estimatedProgressInterval = setInterval(() => {
    if (estimatedProgress < 0.9) {
        estimatedProgress += 0.05; // Incremental change
        setSceneLoadingProgress(estimatedProgress); // Update UI
    }
}, 100);

const handleSceneProgress = (e) => {
    const loadingPercent = e.loaded / e.total;
    if (loadingPercent > estimatedProgress) {
        estimatedProgress = loadingPercent; // Better estimated progress
    }

    setLoadingProgress(loadingPercent);
    setSceneLoadingProgress(loadingPercent);

    if (loadingPercent === 1) {
        clearInterval(estimatedProgressInterval); // Clear once loading completes
    }
};

Explanation

  • The setInterval function increases estimatedProgress slowly until actual progress is received.
  • Once the callback starts providing loading updates, you ensure that the actual loading percentage takes precedence.
  • The interval is cleared when the loading is complete to prevent unnecessary updates.

This approach will help make the loading experience feel smoother right from the start while still reflecting real progress as soon as it becomes available.

Feel free to ask if you need more assistance or improvements to this solution!

1 replies left - Get a PRO license for more AI replies.
thread_xoAnNokKqYoZV8iqRLNO5Prb
Reply to this message to continue the conversation

3

I do thought about what the bot suggested but want to know if there is any better way of handling this?

4

Hi, do you have a reprodution? The progress event is passed along directly from the three.js GLTFLoader which in turn is passed to the FileLoader.

Is it possible that you have Preload Next/Previous values set in the SceneSwitcher which starts download of subsequent scenes in the background already?

I’ll check if enabling this option doesnt invoke the event as expected since it’s not using GLTFLoader

Update: I don’t seem to be able to reproduce it and I get the progress event as expected.

5

In this video, I tried to show the issue more clearly. As you can see, the loading bar stays at 0 for a few seconds and only starts updating after that. For reference, I added a console log saying “from progress listener,” and you can see in the console that it only starts appearing after a short delay.
Link : Game creator Ks's Video - Apr 17, 2025
Relevant Code:

ContextRegistry.addContextCreatedCallback(async (_context) => {
    await onNeedleContextCreated();
  });

  const onNeedleContextCreated = async () => {
    if (hasRegisteredSceneListeners.current) return;

    componentDataManager.current = GameObject.findObjectOfType(ComponentDataContainer);
    sceneSwitcher.current = componentDataManager.current.sceneSwitcher;
    const switcher: SceneSwitcher = sceneSwitcher.current;
    if (!switcher) return;
    switcher.removeEventListener("loadscene-start", handleSceneStart);
    switcher.removeEventListener("progress", handleSceneProgress);
    switcher.removeEventListener("loadscene-finished", handleSceneLoadingFinished);
    switcher.removeEventListener("scene-opened", handleSceneOpened);
    switcher.addEventListener("loadscene-start", handleSceneStart);
    switcher.addEventListener("progress", handleSceneProgress);
    switcher.addEventListener("loadscene-finished", handleSceneLoadingFinished);
    switcher.addEventListener("scene-opened", handleSceneOpened);

    hasRegisteredSceneListeners.current = true;
  };

  const handleSceneStart = (e) => {
    console.log(e);
    if (isInitialLoad.current != 0) {
      if (isLoading) setIsLoading(false);
    }
    setIsSceneLoading(true);
    setSceneLoadingProgress(0);
  };

  const handleSceneProgress = (e) => {
    console.log("from progress listener");
    const loadingPercent: number = e.loaded / e.total;
    if (isInitialLoad.current === 0) {
      setLoadingProgress(loadingPercent);
    }
    setSceneLoadingProgress(loadingPercent);
    if (loadingPercent === 1) {
    }
  };

  const handleSceneLoadingFinished = () => {
    isInitialLoad.current++;
  };
6

Can you share a link to the website?