useLoader onLoad Callback (TextureLoader and useGLTF)

[timohausmann]

TL;DR: For useLoader I wish for a callback function when any resource finishes loading.

---

Hey, In my scene I want a certain load order and I struggle to find a way to run code when useLoader finishes.

I tried the onProgress function argument on useLoader(TextureLoader, ... but it never fires.
The type docs say TextureLoaders uses events instead of callbacks, maybe thats why.

The useGLTF loader from drei has no onProgress callback at all.

Is there a sane way to execute code when useLoader finishes?

I guess the solution is in the extention parameter, but I just don't get how to use it.

const texture = useLoader(TextureLoader, imageUrl, loader => {
    loader.manager.addHandler(/\.png$/i, new TextureLoader()); // how to do stuff onLoad ?
    loader.manager.onLoad(() => console.log(imageUrl)); // this only runs once for the last image
});

I tried Suspense with a fallback first but I see no way to fade out the fallback and I need to get around content flashing.
Now I created a hacky Suspense Fallback, that runs a callback on unmount thinking that the nested suspense finished, but this only works in best case scenarios, it breaks when the fallback unmounts for other reasons. There must be an easy way for an universal onLoad callback for useLoader?

function MyScene() {

    const [posterHasLoaded, setPosterHasLoaded] = useState(false);
    const [modelHasLoaded, setModelHasLoaded] = useState(false);

    return (
        <Suspense fallback={<SuspendHelper onFinish={() => setPosterHasLoaded(true)} />}>
            <SmallPosterWithUseLoader hide={modelHasLoaded} />
        </Suspense>

        {posterHasLoaded && <Suspense fallback={<SuspendHelper onFinish={() => setModelHasLoaded(true)} />}>
            <BigObjectWithUseGLTF />
        </Suspense>}

        {modelHasLoaded && <Suspense>
            <EvenMoreObjects />
        </Suspense>}
    );
}

function SuspendHelper(props) {
    useEffect(() => props.onFinish();
    return null;
}