현재 이용 중인 페이지가 멈추지 않고 로딩 중이라는 건 어떻게 보여줄까?
지금 토이 프로젝트를 진행하면서, 식당 정보 데이터를 가져오는데 생각보다 시간이 좀 걸린다
데이터를 가져오는 동안, 사용자가 데이터를 불러오는 중이라는 사실을 알고 조금 기다려주길 바란다
빠른 네트워크 환경에서는 거의 기다릴 시간 없이 데이터 패치가 되겠지만, 사용자마다 다른 속도의 네트워크 환경에 있기에 여러 환경을 생각하며 사용자 경험을 완성시켜야 한다
로딩 애니메이션을 띄워서 로딩 중을 띄워 보여줄 수도 있지만, 유튜브 같은 플랫폼을 보면 말 그대로 "Skeleton" 화면이 기다리는 동안 보여진다
이런 화면이 보여지면서 데이터를 불러오는 중이라는 건 누구나 깨닫기 쉽다
이제 내 프로젝트에서 이 skeleton UI를 구현해보려고 한다
간편하게 Material UI(MUI)의 skeleton을 이용해 적용하려고 함!
이 skeleton 컴포넌트에는 variant, animation, width, height과 같은 요소들을 넣어 구현할 수 있다
이 variant에는 text, rectangular, circle이 있고 원하는 걸로 사용하면 된다!
나는 이런 식으로 하나의 카드에 대한 스켈레톤을 설정했다!
생각보다 더 간편하잖아...?
자, 이제 이 화면을 처음 화면 렌더링 시 로딩 중일 때 보여주면 되는데 그걸 어떻게 아느냐..?
나는 react query(tanstack query)를 이용해서 비동기 패칭 관리를 하고 있다
여기서 쿼리를 사용하고 있는데 isLoading을 받아와서 true면 로딩 중이이고, false면 데이터 패칭이 끝난 상태이다
(v5부터 isLoading이 isInitialLoading과 같다고 함!)
여기서 드는 의문!
이게 항상 로딩이 0.0000001초라도 생겨도 스켈레톤 화면을 보여줘야 하는가?
그럼 빠른 네트워크 환경의 유저는 아주 잠깐 데이터를 불러오는 동안에도 스켈레톤이 화면이 빠르게 떴다가 데이터가 보여지는 게 아닐까?
그럼 화면이 지저분해질 거 같다는 생각이 들었다.
스켈레톤이 깜빡하고 나왔다가 사라지는 화면이 되는 경우이기에 사용자 입장으로서 뭐지? 싶을 것 같음..
그래서, 이 로딩이 1초 이상일 때부터 스켈레톤 화면을 보여줘야겠다
빠른 환경이라면 스켈레톤을 굳이 볼 일은 없을 것이고, 조금 느린 환경이라면 데이터를 기다리는 동안 스켈레톤 화면을 보는 것이다.
그래서, 이 isLoading에 1000ms의 timer를 만들어줬다
상태를 하나 더 만들어서, 1초가 지난다면 그 상태를 true로 만들어 주고, 이 상태가 true일 때 스켈레톤을 보여주는 거지
이렇게, showSkeleton이라는 상태가 true가 되면 0으로 채운 array를 map해서 RestaurantSkeleton이라는 컴포넌트를 보여준다!
삼항연산자를 사용해서, 상태가 false일 때는 원래 데이터의 UI를 보여주면 된다
너무나도 간단하게, 이렇게 사용하니 적용이 딱 됐다!
(근데, 지금 다른 기능하다가 에러가 떠서 완성 화면은 캡처할 수가 없다..)
처음 적용해보는 스켈레톤 UI 간단하게 해결 :)
