SVG1 path를 따라가는 로딩화면 구현하기 ✈️ path를 따라가는 로딩화면 구현하기Next.js에서 페이지 전환 시 로딩 화면을 띄워주고 싶을 때가 있다.특히 초기 로딩이 느릴 때 사용자에게 "로딩 중입니다"라는 신호를 주는 건 UX적으로 꽤 중요하니까! 근데 문제는... 모든 페이지 이동마다 로딩 화면이 보이면 오히려 거슬린다.CSR 기반 라우팅이라 한 번 방문한 페이지는 정말 빨리 열리는데, 그 짧은 순간에도 로딩이 보이면 되려 방해됨 😅 그래서 처음 방문한 페이지에서만 로딩이 나오고, 이후에는 로딩 없이 자연스럽게 이동되도록 구현해봤다.비행기 애니메이션 SVG 컴포넌트import React from 'react';type LoadingProps = { width?: number;};export default function Loadin.. 2024. 8. 16. 이전 1 다음
