[PC-1568] onboarding 페이지 이동 시 처음에 Lottie 파일들이 깜빡이는 이슈 수정

[comst19]

1. ⭐️ 변경된 내용

• onboarding 다음 페이지 Lottie 프리 로딩 추가
• Lottie 99% 재생 로직 변경

2. 🖼️ 스크린샷(선택)

default.mp4

3. 💡 알게된 부분

4. 📌 이 부분은 꼭 봐주세요!

Summary by CodeRabbit

• Refactor
  • Enhanced onboarding screen transitions with improved page preloading
  • Streamlined animation system for more consistent visual playback

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Two Compose UI files were updated: HorizontalPager configuration enhanced with preloading of one additional page beyond the viewport, and Lottie animation control refactored from stateful management to progress-based clipping for cleaner animation control.

Changes

Cohort / File(s)	Summary
HorizontalPager Configuration feature/onboarding/src/main/java/com/puzzle/onboarding/OnboardingScreen.kt	Added beyondViewportPageCount = 1 parameter to expand page preloading boundary; trailing comma added for consistency.
Animation Control Refactoring feature/onboarding/src/main/java/com/puzzle/onboarding/ui/components/StopAtProgressLottie.kt	Simplified animation state management by replacing LaunchedEffect and derived state with clipSpec = Progress(0f, STOP_PROGRESS); wrapped LottieAnimation in Box with FillWidth scaling; set restartOnPlay = false.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Suggested labels

잡다한 🗂️

Poem

🐰 Hops through pages, one beyond the fold,
Lottie dances where clipSpecs guide and hold,
No more state-juggling, just progress so clean,
The smoothest animation I've ever seen!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: fixing a flickering issue with Lottie files during onboarding page transitions, which directly matches the code changes.
Description check	✅ Passed	The description follows the repository template with all required sections present; however, sections 3 and 4 lack substantive content, though main changes and screenshot are adequately documented.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 803c8a6 and 4ded3c6.

📒 Files selected for processing (2)

• feature/onboarding/src/main/java/com/puzzle/onboarding/OnboardingScreen.kt
• feature/onboarding/src/main/java/com/puzzle/onboarding/ui/components/StopAtProgressLottie.kt

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build

🔇 Additional comments (3)

feature/onboarding/src/main/java/com/puzzle/onboarding/OnboardingScreen.kt (1)

97-98: LGTM! Preloading adjacent pages to fix Lottie flickering.

The addition of beyondViewportPageCount = 1 ensures that Lottie compositions for adjacent pages are loaded before navigation, directly addressing the flickering issue described in the PR objectives.

feature/onboarding/src/main/java/com/puzzle/onboarding/ui/components/StopAtProgressLottie.kt (2)

28-34: Excellent refactoring to use clipSpec for cleaner animation control.

The new approach using clipSpec = LottieClipSpec.Progress(0f, STOP_PROGRESS) with restartOnPlay = false is much simpler and more declarative than the previous stateful implementation. This directly constrains the animation to play from 0% to 99% without manual state management.

---

36-45: Good defensive coding with Box wrapper and null check.

The Box wrapper with composition null check ensures the animation only renders when fully loaded, preventing potential rendering issues. The ContentScale.FillWidth with fillMaxSize() will scale the animation proportionally based on width, which should work well for the onboarding flow.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[tgyuuAn]

👍

이거 백그라운드에서 미리 돌고있을 가능성은 없나요?

[comst19]

val isCurrentPage = pageIndex == currentPage

onboardingPages.getOrNull(pageIndex)?.let { data ->
    PageContent(
        titleRes = data.titleRes,
        pageContentType = data.contentType,
        isPageActive = isCurrentPage
    )
}

StopAtProgressLottie(
    lottieRes = pageContentType.lottieRes,
    shouldPlay = isPageActive,
     modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(375f / 433f),
)

네, isPageActive를 StopAtProgressLottie의 shouldPlay 인자로 넘겨주고 있어서, 백그라운드 페이지가 미리 로드되더라도 사용자에게 보이면 재생됩니다.

(추가)
아래의 코드로 확인해보니 현재 페이지의 lottie만 재생되는 것도 확인했습니다!

LaunchedEffect(progress) {
    if (shouldPlay && progress > 0f && progress < STOP_PROGRESS) {
        android.util.Log.v("로티 체크", "$lottieRes 재생 중... 진행도: $progress")
    }
}

[kkh725]

고생하셨습니다~