diff --git a/plugins/page-loading.client.ts b/plugins/page-loading.client.ts new file mode 100644 index 0000000..93cff14 --- /dev/null +++ b/plugins/page-loading.client.ts @@ -0,0 +1,53 @@ +/** + * 페이지 이동 시 자동 로딩 처리 플러그인 + * 모든 페이지 이동에서 GlobalLoading을 자동으로 표시하고 + * DOM 렌더링 완료 후 자동으로 숨깁니다. + */ +export default defineNuxtPlugin(() => { + const { startLoading } = useLoading(); + const router = useRouter(); + + let loadingStopFn: (() => void) | null = null; + let isNavigating = false; + + // 페이지 이동 시작 시 로딩 시작 + router.beforeEach((to, from) => { + // 같은 페이지 내에서의 이동은 무시 + if (to.path === from.path) { + return; + } + + // 이미 로딩 중이면 무시 + if (isNavigating) { + return; + } + + isNavigating = true; + loadingStopFn = startLoading("페이지를 불러오는 중..."); + }); + + // 페이지 이동 완료 후 로딩 종료 + router.afterEach(() => { + if (!isNavigating || !loadingStopFn) { + return; + } + + // DOM이 완전히 렌더링된 후 로딩 종료 + nextTick(() => { + setTimeout(() => { + loadingStopFn?.(); + loadingStopFn = null; + isNavigating = false; + }, 200); + }); + }); + + // 에러 발생 시 로딩 강제 종료 + router.onError(() => { + if (loadingStopFn) { + loadingStopFn(); + loadingStopFn = null; + isNavigating = false; + } + }); +});