Spinner 컴포넌트 개발

[minai621]

요약 (Summary)

loading에 대한 웹 접근성 제공하고, loading 상태일 때는 fallback ui 노출, loading 상태가 끝나면 children 노출합니다.

배경 (Background)

초기에는 primitive한 spinner의 형태를 고민하였으나, spinner 자체가 css로 구현되기 때문에 spinner 자체를 구현하기 보다는 로딩 상태임을 명시적으로 나타내는 컴포넌트가 가장 primitive한 형태라는 생각이 들었습니다.
또한, 해당 기능은 react의 suspense와 기능적으로 유사하나, suspense의 경우 유저가 로딩 상태를 제어할 수는 없다는 생각이 들어 suspense와 로딩을 제어할 수 있는 컴포넌트를 합쳐 제공하고자 합니다.

목표 (Goals)

• loading 상태에 대한 props가 제공된다면 유저가 로딩 상태의 시작과 끝을 직접 제어하는 컴포넌트로써 동작합니다.
• 해당 props가 제공되지 않는다면 react의 suspense를 확장한 컴포넌트로써 동작합니다.
• loading에 대한 웹 접근성이 적용됩니다.
• loading일 때에는 fallback ui를 노출하고, loading이 끝나면 children을 노출합니다.

계획 (Plan)

토스 발표 자료 중 skeleton type으로 로드하는 내용

1. server side rendering에서 suspense
   이전 회의에서 suspensive 공식 문서에 따르면 종종 server 단에서 suspense를 사용할 때 문제가 발생할 수 있어 client에서만 사용할 수 있는 컴포넌트로 변경해주는 props를 제공한다고 말씀드렸는데, 해당 에러를 구글링해본 결과, 이 이슈밖에 찾을 수 없어 어떤 상황에서 해당 에러가 발생하는지 재현해볼 수 없었습니다. 이에 해당 케이스는 일반적이지 않은 경우라고 판단하여 해당 기능 없이 구현하기로 결정하였습니다.

마일스톤 (Milestones)