# React three fiber Loading screen: components not loading

**URL:** <https://discourse.threejs.org/t/react-three-fiber-loading-screen-components-not-loading/58878>\
**Category:** Questions\
**Tags:** three-js, suspense, loaders, react-three-fiber\
**Created:** [December 4, 2023, 3:40pm UTC](https://discourse.threejs.org/t/react-three-fiber-loading-screen-components-not-loading/58878 "2023-12-04T15:40:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Diya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diya/32/41337_2.png) [@Diya](https://discourse.threejs.org/u/Diya)\
**Post date:** [December 4, 2023, 3:40pm UTC](https://discourse.threejs.org/t/react-three-fiber-loading-screen-components-not-loading/58878/1 "2023-12-04T15:40:24Z")

</div>

Heyy everyone! I have this piece of code here that sets up a 3D scene in react three fiber. My main issue currently is the loading screen component. I want the loading screen to persist until my 3D scene and its elements have loaded.  
Here is my code for that:

```javascript
import React, { useState, useRef, useEffect , Suspense} from "react"
import './index.css'
import {Canvas} from "@react-three/fiber"
import {Shadow, Html, CameraControls,useProgress} from "@react-three/drei"
import Object from "./Object"
// import LoadingScreen from "./LoadingScreen"
import { LoadingScreen } from "./LoadingScreen"

export default function Objects() {
   const cameraControlRef = useRef();
  // const [isLoading, setIsLoading] = useState(true);

  // const handleButtonClick = () => {
  // // Replace the URL with the desired link
  // window.location.href = "https://drive.google.com/file/d/1LViNS_p6i3R7LzjpsyITiqIBI8Y17R28/view?usp=sharing";
  // };
  // useEffect(() => {
  // // Simulate loading for 2 seconds
  // setTimeout(() => {
  // setIsLoading(false);
  // }, 2000);
  // }, []);
  
  const [start, setStart] = useState(false);
  return (
    <>
     {/* {isLoading && <LoadingScreen/>} */}
      <Canvas 
        shadows
        camera={{ fov: 75, position: [-3, 5, 10]}}
      >
        <CameraControls ref={cameraControlRef} enableTransition/>
        <Shadow
          scale={2}
          bias={-0.001}
          width={1024}
          height={1024}
        />
        <Suspense fallback={null}>{start &&
          <Object /> &&
            <Html>
            <div className="buttons" style={{ position: 'absolute',
              top: '-250px',
              left: '-725px',
              zIndex: 999, }}>
              <button
                type="button"
                onClick={() => {
                  cameraControlRef.current?.setPosition(-3,5,10,true);
                }}
              >
                View Scene
              </button>
              <button
                type="button"
                onClick={() => {
                  cameraControlRef.current?.setPosition(0,0.5,3.8,true);
                }}
              >
                Explore More
              </button>
            </div>
            </Html>}    
      </Suspense>
      </Canvas>
      {/* <LoadingScreen/> */}
      <LoadingScreen started={start} onStarted={() => setStart(true)} />  
      </>        
  );
}

```

Now my issue is the program doesn’t load the 3D scene at all. The loading screen is working fine. After some troubleshooting I realised the main error is on the line {start && && \<Html…} but without the line 3D scene content becomes visible beforehand (aka while loading is not fully done) and the whole thing looks extremely blocky. I looked up on the internet but couldn’t find answers for this specific problem. I want my loading screen to persist until my 3D scene in Object is loaded and the elements in HTML tag is loaded. Please help me out :")  
and thanks in advance!!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [December 4, 2023, 3:52pm UTC](https://discourse.threejs.org/t/react-three-fiber-loading-screen-components-not-loading/58878/2 "2023-12-04T15:52:55Z")

</div>

> [@Diya](#):
>
> {start && && \<Html…}

Is not valid javascript / JSX (and in some magical world in which it’d be valid, it’d be equivalent to `{start && undefined && <Html>` - which will always be falsy and never render the `<Html>` part.)

Not 100% sure, but I think instead of:

```jsx
{start &&
<Object /> &&
<Html>...}

```

You meant:

```jsx
{start ?
<Object /> :
<Html>...}

```

? If alternatively, you want the `<Html>` part to render when `<Object>` returns `null` - it’s better to not chain it like this, and just create separate return statements in separate `if` conditionals, you’ll likely find it easier to debug.

---

<div class="post-metadata">

**Author:** ![Diya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diya/32/41337_2.png) [@Diya](https://discourse.threejs.org/u/Diya)\
**Post date:** [December 4, 2023, 4:43pm UTC](https://discourse.threejs.org/t/react-three-fiber-loading-screen-components-not-loading/58878/3 "2023-12-04T16:43:57Z")

</div>

Heyy! Thank you so very much for the solution. I started debugging with the line {start && …} and yes it did turn out to be the main issue. I wasn’t sure before as to why because no errors showed up on the console.  
I actually wanna load the element(which contains my 3D scene) and the HTML tag elements together. The loading screen should persist till both have successfully loaded and then when the user presses enter, they should be able to enter into the ‘Experience’. Do you have any suggestions/fixes in my pre-existing code for that? (removing the start line makes my loading screen content load perfectly and then fade away when I press enter. So I think this code works).  
Attaching my LoadingScreen.jsx code here for reference:

```javascript

import { useProgress } from "@react-three/drei"

// export default function LoadingScreen() {
// return (
// <div className="loading">
// <ReactLoading type="spinningBubbles" color="white" height={100} width={100}/>
// </div>
// );
// }

export const LoadingScreen = ({started, onStarted})=>{
  const {progress}=useProgress();
  return( 
    <div className={`loadingScreen ${started ? "loadingScreen--started" : ""}`}>
      <div className="loadingScreen_progress">
        <div 
          className="loadingScreen_progress_value"
          style={{
            width: `${progress}%`,
          }}/>
      </div>
      <div className="loadingScreen_board">
        <h2 className="loadingScreen_title">Diya's Mac</h2>
        <button className="loadingScreen_button"
          disabled={progress<100}
          onClick={onStarted}>
            Enter
          </button>
      </div>
    </div>
  );

};

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 4, 2023, 6:12pm UTC](https://discourse.threejs.org/t/react-three-fiber-loading-screen-components-not-loading/58878/4 "2023-12-04T18:12:08Z")

</div>

it’s just this, suspense is what tells you when something’s done

```jsx
<Suspense fallback={<Loading />}>
  <Canvas>
    <SomeAsyncComponent />
    ...

```