From ac3500a2ae7c4fe9b3c84ab62670f371db7473bf Mon Sep 17 00:00:00 2001
From: Afonso Ribeiro <105890161+ARibeiro3110@users.noreply.github.com>
Date: Mon, 29 Apr 2024 12:20:05 +0100
Subject: [PATCH] fix: Progress Bar widget animation inconsistency (#11915)
 (#32462)

## Description
- Fixed the issue where the animation of the progress bar wouldn't work
if the value was going from zero or going to zero.
- Made the animation consistent even when the introduced value is less
than zero.

Fixes #11915

## Automation

/ok-to-test tags=""

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.

<!-- end of auto-generated comment: Cypress test results  -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **Bug Fixes**
- Improved the `ProgressWidget` to correctly handle negative progress
values by ensuring the progress bar width is never negative.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/widgets/ProgressWidget/component/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/widgets/ProgressWidget/component/index.tsx b/app/client/src/widgets/ProgressWidget/component/index.tsx
index 0c09f1c517..e4dc039e14 100644
--- a/app/client/src/widgets/ProgressWidget/component/index.tsx
+++ b/app/client/src/widgets/ProgressWidget/component/index.tsx
@@ -149,7 +149,7 @@ const DeterminateLinearProgress = styled.div<{
 
   &:after {
     background: ${({ fillColor }) => fillColor};
-    ${({ value }) => value && `width: ${value}%`};
+    ${({ value }) => value !== undefined && `width: ${Math.max(0, value)}%;`}
     transition: width 0.4s ease;
     position: absolute;
     content: "";