baron-sso/docs/adminfront-flicker-trace-analysis-2026-06-15.md

adminfront 깜빡임 trace 분석

작성일: 2026-06-15

입력 자료

• adminfront/Trace-20260615T113806.json.gz

관찰 결과

• trace 구간은 약 4.18초이다.
• DevTools screenshot은 250장 포함되어 있다.
• 화면 전체 shell이 사라지는 현상은 아니고, 본문 영역이 반복적으로 repaint되는 형태이다.
• Animation 이벤트에서 enter 애니메이션이 147회 반복 시작되었다.
• 반복 대상은 다음 nodeName으로 확인되었다.
  • DIV class='space-y-4 animate-in fade-in duration-500'
• 같은 nodeName의 Paint 이벤트도 147회 발생했고, span은 약 4.1초였다.

원인

장기 유지되는 admin page/tab container에 animate-in fade-in duration-500 진입 애니메이션이 붙어 있었다.

이 클래스가 query/refetch, tab content 갱신, 렌더 상태 변화와 결합되면서 본문 영역이 반복 진입 애니메이션을 수행했고, 사용자는 이를 간헐적인 깜빡임으로 보게 된다.

수정

다음 장기 컨테이너에서 페이지 레벨 진입 애니메이션을 제거했다.

• TenantWorksmobilePage tab panels
• GlobalOverviewPage root container
• DataIntegrityPage tab panels
• TenantDetailPage nested outlet wrapper

Dialog, dropdown, toast처럼 짧게 열리고 닫히는 transient UI의 state-based animation은 유지한다.

회귀 방지

• Worksmobile tab panel에 trace 원인 클래스가 다시 들어오지 않도록 테스트를 추가했다.
• adminfront 전체 .tsx에서 animate-in fade-in duration-500 페이지 레벨 패턴이 재도입되지 않도록 정책 테스트를 추가했다.

검증

pnpm --dir adminfront exec vitest run src/features/coverage/adminPageAnimationPolicy.test.ts --bail 1
pnpm --dir adminfront exec vitest run src/features/tenants/routes/TenantWorksmobilePage.test.ts --bail 1
pnpm --dir adminfront exec vitest run src/features/overview/GlobalOverviewPage.test.tsx --bail 1
pnpm --dir adminfront exec vitest run src/features/integrity/DataIntegrityPage.test.tsx --bail 1
pnpm --dir adminfront exec vitest run src/features/tenants/routes/TenantDetailPage.worksmobile.test.tsx --bail 1