Public 폴더 이미지를 불러오는동안 로딩화면을 보여주려면?

[아왜나만갖고그래]

https://gfycat.com/ko/scalybonydugong
(움짤 링크)

axios 요청을 보내고 나서 서버에서 리스트 데이터를 받아오면
그 리스트 데이터의 이름을 갖고 public 폴더에 있는 이미지를 가져오고 있습니다.

움짤에서 잘 보이실지 모르겠는데 지금 보시면 이미지를 바로바로 가져오지 못하고
몇 가지 이미지는 늦게 로딩이 되고 있는 상태입니다.
그래서 이미지가 로딩중일때는 회색 투명 박스에다가 "로딩중..." 뭐 이렇게 띄워놓고 
저기 이미지들이 로드가 완료되면 화면이 전환되도록 하고 싶습니다.
axios 요청의 처음과 끝에 로딩 state를 true/false로 바꾸도록 달아놓을까 했는데
지금 이 렉은 axios 요청에서 발생하는 게 아니라
img src 요청에서 발생하는 렉이기 때문에 통하지 않을 것 같습니다.

해당 요청은 <img src={process.env.PUBLIC_URL + '/musicdiskResize/'+ renamed + '.webp'} 로 쓰여졌고
renamed는 서버에서 axios 요청으로 받아온 이름을 가공한 변수입니다.
요럴 때에는 어떤 기술을 쓰면 좋을까요?

[codingapple]

https://stackoverflow.com/questions/68819606/how-to-use-onload-to-show-loader-when-image-is-loading-in-react-js
이미지에 onLoad={} 달아두면 로딩완료시 코드를 실행해주는데 모든 이미지에 onLoad 달아놓고 체크해보면 될듯요  

[아왜나만갖고그래]

따흐흑 선생님 너무 감사합니다 그런 의미로 구독 한 번 더 눌러드렸습니다

[글쓴이]

글