[20일차] skeleton, loading spinner 보여주기

서버에서 데이터를 가져오는 동안 사용자가 빈 화면만 보고있는다는 걸 깨달았다. UX 향상을 높이기 위해 Skeleton과 loading spinner를 적용하기로 했다.

Mui에서 이미 제공해주고 있는 컴포넌트를 사용해 import 해왔다.

import CircularProgress from '@mui/material/CircularProgress';
import * as S from './style';

function Loading() {
  return (
    <S.LoadingWrapper>
      <CircularProgress size='13rem' />
    </S.LoadingWrapper>
  );
}

export default Loading;

라고 작성하고 TableBody 안에 다음과 같이 집어넣었는데

{isLoading?<Loading/>:<TableBody/>

자꾸만 Warning: validateDOMNesting(...): <span> cannot appear as a child of <table>.라는 에러가 났다.

뭐지? Table 자체에 문제가 있었나 싶어 Table 코드를 하나하나 수정했었는데 알고보니 TableBody는 아무 문제가 없었다ㅠㅠ
<Loading> 컴포넌트는 span 요소인데,
mui 자체에서 지원하는

그래서 다음과 같이 코드를 작성해서 에러를 무사히 해결할 수 있었다!

  {isLoading ? (
            <tbody>
              <tr>
                <td colSpan={7}>
                  <Loading />
                </td>
              </tr>
            </tbody>
          ) : (
            <TableBody
              songs={songs}
              likedSongs={likedSongs}
              handleLikeClick={handleLikeClick}
            />
          )
  }

오늘의 작업결과

뱅글뱅글 잘 돌아간다!