본문에서는 Turbo Frames의 로딩 상태를 개선하기 위한 여러 가지 CSS 기반 접근 방식을 상세히 설명합니다.
1. 표준 Turbo Frame 로딩 상태의 한계
기본적인 <turbo-frame> 태그는 src 콘텐츠 로드 전까지 내부 콘텐츠를 표시합니다. 하지만 link_to 클릭 등으로 재로드 시 Turbo가 기존 콘텐츠를 비워 빈 화면이 표시되며, 이는 사용자 경험을 저해합니다.
2. CSS-only 로딩 인디케이터
Turbo가 콘텐츠를 가져오는 동안 프레임에 자동으로 추가하는 aria-busy="true" 속성을 활용합니다. 이 속성을 CSS 선택자로 사용하여 기존 콘텐츠 위에 로딩 인디케이터를 오버레이할 수 있습니다.
프레임에 position: relative를 적용하고 ::after 가상 요소를 오버레이 형태로 숨겨둡니다. aria-busy="true" 속성이 설정되면 ::after 가상 요소가 표시되어 “Loading…” 메시지를 보여줍니다. 이 방식은 기존 콘텐츠를 유지하며 로딩 피드백을 제공합니다.
3. SVG 스피너 활용
텍스트 로더보다 시각적으로 매력적인 스피너를 사용할 수 있습니다. 원리는 aria-busy="true" 상태를 활용하는 CSS-only 방식과 동일하나, ::after 가상 요소의 스타일링이 다릅니다.
content는 비워두고, 스피너 그래픽은 데이터 URI로 인코딩된 SVG를 background-image로 설정합니다. CSS animation을 통해 가상 요소를 무한히 회전시킵니다. 이 가상 요소 역시 aria-busy="true" 속성이 있을 때만 표시됩니다.
4. Rails Icons 활용
세 번째 예시의 개선된 형태로, rails_icons Gem을 사용하는 경우 CSS Custom Properties를 활용합니다.
뷰에서 turbo-frame 요소의 인라인 스타일 속성을 통해 Base64 인코딩된 아이콘의 SVG 데이터를 CSS 변수로 전달합니다. CSS에서는 하드코딩된 데이터 URI 대신 var(--icon)을 사용하여 아이콘을 로드합니다. 이는 아이콘 관리를 중앙화하고 CSS를 깔끔하게 유지하는 데 기여합니다.