Progressive loading states with suspense

참조: Progressive loading states with suspense

이 예제는 r3f와 React Suspense가 어떻게 상호작용할 수 있는지를 보여 줍니다.

      <Area className="relative">
        <React.Suspense
          fallback={<div className="absolute w-full flex h-full justify-center items-center">Loading...</div>}
        >
          <Delay name="level 1" milliseconds={2000} />

첫번째 suspense는 1초간 강제로 걸리며 Loading...이라는 텍스트를 중앙에 표시합니다.

아직 <Canvas /> 컴포넌트를 마운트 하기 전 이기 때문에 통상적인 React의 Suspense 시나리오를 보여줍니다.

            <Rotate position-y={-0.5} scale={0.2}>
              <React.Suspense fallback={<Model url={glbBustLo} />}>
                <Delay name="level 2" milliseconds={2000} />
                <Model url={glbBustHi} />
              </React.Suspense>
            </Rotate>

두번째 suspense부터 흥미롭습니다. 2초간의 시간동안 suspense가 걸리며 이때 저품질의 모델을 표시합니다.

2초 후에는 고품질의 모델을 표시합니다.

이 과정에서 회전 상태는 끊기지 않고 지속적으로 이루어 집니다.

시뮬레이션을 위해 <Delay /> 컴포넌트를 사용한 명시적인 suspense를 하였습니다.

만일 <Delay />를 사용하지 않을 경우 저품질의 모델이 고품질의 모델보다 더 빠르게 네트워크를 통해 전달 받는다는 것을 가정하면, 네트워크가 느린 환경에서는 고품질의 모델 정보를 확보할 때 까지 저품질의 모델을 표시하게 됩니다.

Imperative 하게 코딩할 경우 별도의 로더와 이벤트 프로그래밍을 활용해서 제법 복잡한 코딩을해야 할 것 입니다.

React의 프로그래밍 모델이 보다 직관적이고 유지보수가 용이 합니다.

R3f: Progressive loading states with suspense

Progressive loading states with suspense