tweak(ui): add smooth fill animation to progress bar

[olehselin]

Description

Implemented a smooth fill effect for the progress bar component. Now, when the value changes, the indicator updates with a smooth animation rather than a sudden jump, making the interface feel more responsive and improving the overall user experience (UX).

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
staging-organized-app	Ready	Preview	Jul 26, 2026 3:17pm
test-organized-app	Ready	Preview	Jul 26, 2026 3:17pm

[coderabbitai]

Walkthrough

The progress bar now always renders its fill element, conditionally shows the value, and adjusts padding for zero and nonzero values. Its styles add width and padding transitions, clipped single-line content, zero minimum width, and reduced horizontal padding.

Changes

Progress bar fill behavior

Layer / File(s)	Summary
Fill rendering and styles src/components/progress_bar/index.tsx, src/components/progress_bar/index.styles.tsx	ProgressBar keeps the fill mounted and applies value-dependent padding. Fill styling now supports width and padding transitions, clipped single-line content, zero minimum width, and tighter horizontal spacing.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change: adding a smoother fill animation to the progress bar.
Description check	✅ Passed	The description matches the PR’s goal of making the progress bar fill smoothly on value changes.

✨ 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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/progress_bar/index.styles.tsx`:
- Around line 21-25: Update the progress bar styles near the width and overflow
declarations to preserve an intrinsic minimum width when the value is positive,
preventing labels from being clipped; keep the zero-value fill widthless. Use
the existing value-dependent styling mechanism in the progress bar rather than
applying the minimum width unconditionally.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 973fcc8c-51d7-4a9a-8f0c-9130ef5f2bc3

📥 Commits

Reviewing files that changed from the base of the PR and between 1a187a0 and 20848ee.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json, !**/*.json

📒 Files selected for processing (2)

• src/components/progress_bar/index.styles.tsx
• src/components/progress_bar/index.tsx

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Preserve space for positive-value labels.

With minWidth: '0' and overflow: 'hidden', small positive percentages can clip the numeric label completely (for example, 1 / 100). Retain an intrinsic minimum width for positive values, while keeping the zero-value fill widthless.

Proposed fix

 export const StyledProgressBarFill = styled(Box)({
-  minWidth: '0',
+  minWidth: 'fit-content',
   justifyContent: 'center',

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	minWidth: '0',
	justifyContent: 'center',
	transition: 'width 0.4s ease, padding 0.4s ease',
	overflow: 'hidden',
	whiteSpace: "nowrap",
	minWidth: 'fit-content',
	justifyContent: 'center',
	transition: 'width 0.4s ease, padding 0.4s ease',
	overflow: 'hidden',
	whiteSpace: "nowrap",

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/progress_bar/index.styles.tsx` around lines 21 - 25, Update
the progress bar styles near the width and overflow declarations to preserve an
intrinsic minimum width when the value is positive, preventing labels from being
clipped; keep the zero-value fill widthless. Use the existing value-dependent
styling mechanism in the progress bar rather than applying the minimum width
unconditionally.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud