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

**URL:** <https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945>\
**Category:** Questions\
**Tags:** r3f, loading, mesh\
**Created:** [March 18, 2024, 9:35am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945 "2024-03-18T09:35:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalabedo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kalabedo/32/43091_2.png) [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Post date:** [March 18, 2024, 9:35am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945/1 "2024-03-18T09:35:31Z")

</div>

Hi there,

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

```javascript
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](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

---

<div class="post-metadata">

**Author:** ![kalabedo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kalabedo/32/43091_2.png) [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Post date:** [March 18, 2024, 10:59am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945/2 "2024-03-18T10:59:04Z")

</div>

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](https://codesandbox.io/p/devbox/modelswitchtest-vzwp4l?file=%2Fsrc%2FComponents%2FLoadingScreen.jsx%3A11%2C33)

---

<div class="post-metadata">

**Author:** ![Nehakumari1](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@Nehakumari1](https://discourse.threejs.org/u/Nehakumari1)\
**Post date:** [March 18, 2024, 11:33am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945/3 "2024-03-18T11:33:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kalabedo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kalabedo/32/43091_2.png) [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Post date:** [March 18, 2024, 11:48am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945/4 "2024-03-18T11:48:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nehakumari1](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@Nehakumari1](https://discourse.threejs.org/u/Nehakumari1)\
**Post date:** [March 20, 2024, 6:11am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945/5 "2024-03-20T06:11:23Z")

</div>

Try this

```javascript
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>
  );
};

```

---

<div class="post-metadata">

**Author:** ![kalabedo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kalabedo/32/43091_2.png) [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Post date:** [March 20, 2024, 7:11am UTC](https://discourse.threejs.org/t/how-to-get-rid-of-the-short-whitescreen-when-loading-new-model/62945/6 "2024-03-20T07:11:00Z")

</div>

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](https://codesandbox.io/p/devbox/modelswitchtest-vzwp4l?file=%2Fsrc%2FComponents%2FModelSwitch.jsx%3A13%2C28)