Progressbar snapping jitter

[Aryan0819]

Related Issue

• Closes: Layout Snapping Jitter inside the Scroll Bar Component #474

---

Description

🧱 The Architectural Context:
Seamless user experiences depend on smooth, gradual transitions. Conditional rendering ({condition && ...}) completely unmounts old DOM nodes and attaches fresh elements on the fly, which can disrupt smooth visual transitions.

❌ The Failure Mechanism:
The original progress bar toggled between two separate element containers based on the state variable isAnimating. The initial loader smoothly scaled across the screen width from 0% to 100% over a fixed 2-second window. The exact millisecond isAnimating flipped to false, that loading element unmounted and the active scroll tracker mounted. If a user had already scrolled halfway down the page during that initial loading phase, the progress bar would instantly snap from 100% back to 50%.

💥 The Impact:
This sudden horizontal shift created a jarring visual jump that made the interface feel unpolished and glitchy.

✅ The Solution:
Unified the layout structure into a single, continuous HTML tracking node. Instead of swapping components out of the DOM entirely, the updated code uses dynamic inline style properties to shift the transition behavior profile from a time-based ease curve over to layout scroll-depth tracking ticks the moment the page finish timer resolves.

---

How Has This Been Tested?

• Transition Continuity Verification: Tested by mounting the component and scrolling immediately during the loading animation phase. Confirmed that when the 2-second timer ends, the bar smoothly scales into position matching the scroll depth without jumping or flashing.
• Scroll Percentage Tracking: Verified that real-time document height calculation remains perfectly functional and responsive across page scrolls.

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

[netlify]

❌ Deploy Preview for github-spy failed.

Name	Link
🔨 Latest commit	9b1e0bd
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a130cc0dd37fe0008e2a89d

[coderabbitai]

Warning

Review limit reached

@Aryan0819, we couldn't start this review because you've used your available PR reviews for now.

Your plan currently allows 1 review/hour. Refill in 16 minutes and 13 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f207aefa-624d-478e-ba51-d0f7907be60a

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6bc3e and 9b1e0bd.

📒 Files selected for processing (4)

• backend/config/passportConfig.js
• backend/models/User.js
• src/components/ScrollProgressBar.tsx
• src/hooks/useDebounce.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[Aryan0819]

@mehul-m-prajapati @Srijatalamarla @ASR1015 @md-asharaf please kindaly review this pr

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #489 has been merged! 🎉🎉