현재 상황

비디오가 로드 중일때 이렇게 아무 화면도 나오지 않는 것을 볼 수 있다.

처음엔 리액트에서 제공하는 스켈레톤 로더를 활용하려고 하였다.

Skeleton Loader For Iframe - React Loading Iframe | Reactscript

기존 페이지는 서버 컴포넌트였으나 해당 라이브러리를 사용할 경우 클라이언트로 변경이 필요하였다.

내부적으로 useState를 사용하는 것 같다.

또한 현재 비디오를 불러오는 페이지에서 iframe과 비디오 개수는 금방 인식하나 그려질 때까지 시간이 걸리는 거라 iframe에 배경이미지를 넣어서 로딩되면 배경 이미지 위로 그려지도록 하였다.

로딩 이미지 넣기

이렇게 iframe의 위치와 개수는 정해져 있기 때문이다.

로딩 gif 이미지를 넣었으나 이처럼 여러 이미지가 한 iframe 안에 그려지는 걸 볼 수 있다.