How to get rid of the short Whitescreen when loading new Model?

Questions
, ,
1

Hi there,

For my product configurator i implemented a way to switch between different models with the javascript switch function:

export const ModelSwitch = () => {
  const Model = useModelStore((state) => state.Model);

  switch (Model) {
    case "Handle":
      return <Handle />;
    case "Knob":
      return <Knob />;
    default:
      return <></>;
  }
};

This works fine, the problem is that i have alot of models and i can’t load all models upfront with useGLTF.preload(). So when switching between models there is a small whitescreen because the model is getting loaded. How can i get rid of this? I imagine something like only replace if the other model is loaded, or better show some loading ui in between so the user sees what is goin on (i tried adding a loading screen with suspense, but i cant insert html into the canvas…).

Here is a Codesandbox showing my problem: https://codesandbox.io/p/devbox/modelswitchtest-vzwp4l
On the first model switch there is the whitescreen. When the model is loaded it’s gone obviously.

Thanks for any idea or direction i can search for, Tom

2

I figured i can just use <Suspense> and as a fallback i use Drei’s <Html> Component.https://codesandbox.io/p/devbox/modelswitchtest-vzwp4l?file=%2Fsrc%2FComponents%2FLoadingScreen.jsx%3A11%2C33

3

Implement a loading UI using React Suspense or other indicators, like a loading spinner or progress bar. Optimize model loading by preloading models asynchronously in the background to minimize the white screen effect and check a smoother user experience during transitions.

4

I know how to preload the models, but how can i load them asynchronous? Does it have to do with React.lazy()?

5

Try this

const ModelSwitch = () => {
  const Model = useModelStore((state) => state.Model);

  const models = {
    Handle: React.lazy(() => import('./Handle')),
    Knob: React.lazy(() => import('./Knob')),
  };

  const ModelComponent = models[Model];

  return (
    <React.Suspense fallback={<LoadingSpinner />}>
      {ModelComponent && <ModelComponent />}
    </React.Suspense>
  );
};
6

I get this error:
Uncaught TypeError: can’t convert item to string

i logged the models[model] object, i get this weird lazy Object:
Object { “$$typeof”: Symbol(“react.lazy”), _payload: {…}, _init: lazyInitializer(payload), … }

Here is the updated Codesandbox with your suggestion:
https://codesandbox.io/p/devbox/modelswitchtest-vzwp4l?file=%2Fsrc%2FComponents%2FModelSwitch.jsx%3A13%2C28