Skip to content

Latest commit

 

History

History
29 lines (22 loc) · 989 Bytes

progress-use-progress.mdx

File metadata and controls

29 lines (22 loc) · 989 Bytes
title sourcecode
Progress / useProgress
src/core/Progress.tsx

A convenience hook that wraps THREE.DefaultLoadingManager's progress status.

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

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

If you don't want your progress component to re-render on all changes you can be specific as to what you need, for instance if the component is supposed to collect errors only. Look into zustand for more info about selectors.

const errors = useProgress((state) => state.errors)

👉 Note that your loading component does not have to be a suspense fallback. You can use it anywhere, even in your dom tree, for instance for overlays.