React와 같은 CSR에서 데이터 로딩 중 화면 구성 보통 어떤식으로 하시나요?

Question

기본값을 지정해서 보여주자니 뭔가 기본값이 있는 화면이 띄워져 있다가 데이터를 불러온 후 화면이
전환되는듯한 느낌을 주면 사용성이 안좋을거같아서..

Skeleton을 띄우는게 제일 무난할거같긴한데..
보통 어떤식으로 사용하시나요??

김하림 · Answer

네, 말씀하신 것처럼 보통은 스켈레톤이나 로딩 스피너를 많이 사용합니다.

사용자 경험을 좀 더 높이고 싶다면 시나리오에 따라서 로딩 전략을 좀 더 다양하게 가져갈 수도 있습니다. 제가 예전에 썼던 글 중에 사용자 경험을 높여줄 로딩 UX 패턴(https://careerly.co.kr/comments/89559) 이라는 글을 참고해보시면 좋을 것 같습니다.

실용적인 레퍼런스가 필요하시면 Ant Design 같은 오픈소스를 참고해보시는 것도 좋습니다.
저는 Ant Design의 테이블 컴포넌트(https://ant.design/components/table)가 사용자 경험을 높인 로딩의 좋은 예시라고 생각합니다. 테이블 컴포넌트에 오버레이 + 스피너를 적용해서 직관적이고 스무스한 로딩을 구현했었던 점이 기억에 남네요.