White screen showing in react js gltf model, not loading properly with react-three/fibre and drei and three js

Question

I used @react-three/fiber , @react-three/drei, three js and gltfjsx to make a 3d rendering website. I want to render a gltf file and I successfully could do it already but with a problem which is whenever the dev server starts the screen flickers and goes blank. Although if i use meshes provided by drei like cube and sphere the screen won't go blank but as soon as i want to use custom gltf model, the screen goes blank down below is my jsx component and app.js file

MODEL COMPONENT

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/linear_irl.gltf')
  return (
    <group ref={group} {...props} dispose={null} scale={10}>
      <mesh geometry={nodes.sphere.geometry} material={nodes.sphere.material} />
      <mesh geometry={nodes.sphere_1.geometry} material={nodes.sphere_1.material} />
      <mesh geometry={nodes.sphere_2.geometry} material={nodes.sphere_2.material} />
    </group>
  )
}

useGLTF.preload('/linear_irl.gltf')

App.js

<Canvas className="Canvas">
        <ambientLight intensity={0.5}/>
        <directionalLight position={[-2,5,2]}/>
        <Suspense fallback={null}></Suspense>
        <OrbitControls/>
          <Linear_irl/>
      </Canvas>

Link to the gltf file down below GLTF File Google Drive Link

Answer 1

Tried this way? wrap the whole scene with Suspense right below Canvas.

<Canvas className="Canvas">
  <Suspense fallback={null}>
    <ambientLight intensity={0.5}/>
    <directionalLight position={[-2,5,2]}/>
    <OrbitControls/>
    <Linear_irl/>
  </Suspense>
</Canvas>