-1

I'm using react three fiber in my website which has added to the initial load time of my site. Rather than just using a useEffect hook with a timeout, I'm trying to create a website loader to show the user the progress of the initial load before the home screen appears.

I've seen it done in both of these nextjs sites but I'm unsure how and looking for direction. I'd only be looking to put a percentage in the middle of the screen and then build from there.

https://www.richardekwonye.com/ https://robin-noguier.com/

All help is appreciated.

Noah Trotman
  • 155
  • 1
  • 11

1 Answers1

0

If you want to get the number for the percentage and style it yourself, @react-three/drei has a hook called useProgress that has that information. This code is taken straight from the drei docs:

function Loader() {
  const { active, progress, errors, item, loaded, total } = useProgress()
  return <Html center>{progress} % loaded</Html>
}

return (
  <Suspense fallback={<Loader />}>
    <AsyncModels />
  </Suspense>
)

Alternatively, drei also has a <Loader /> component that works quite well and you can put outside of the Canvas.

DCVDiego
  • 276
  • 3
  • 7