댓글달기 버튼에 동적 효과 추가

See the Pen Submitting animation by JinH (@JinH) on CodePen.

티스토리 블로그에서는 댓글달기 버튼을 누르면 잠시 딜레이 후 뿅하고 댓글이 생겨난 게 화면에 보이게 되는데, 버튼을 누르고 난 뒤 서버랑 통신하는 시간동안 화면에 아무런 표시가 없기 때문에 성질급한 방문객들이 버튼을 연타하는 사태가 발생한다. 그 결과 똑같은 댓글이 여러개 생성되는 문제가 있었다.

이걸 해결하기 위해 버튼을 누른 직후 화면에 시각적 효과를 줘서 '뭔가 처리 중인게 틀림없다'라는 느낌을 주고자 여러가지 방안을 생각해 봤는데...

1. 클릭 후 버튼에 스피너 표시
2. 버튼 주위에 진행막대 표시
3. 버튼을 진행바처럼 보이도록 변경

다 만들어보니 3번이 멋지길래 그걸로 적용했다. 암튼 내가 만들었지만 개쩌는 듯.

근데 습관적으로 버튼을 더블클릭하는 방문객들한테는 무용지물이라는 단점이 있다...

끝.