Indeterminate progress when value -1

[ecarreras]

This pull request updates the ProgressBarValue widget to support an indeterminate loading state, improving user feedback when progress is unknown. The main changes include adding an animated indeterminate state to the progress bar and updating the component logic to handle this new state.

Progress bar enhancements:

• Added an indeterminate animation to the progress bar using a new indeterminateAnimation keyframes definition in ProgressBarValue.styles.tsx. When the value prop is -1, the progress bar displays a moving indicator instead of a static fill.
• Updated the StyledProgress styled component to accept a new $isIndeterminate prop, which triggers the animation and sets the progress bar width to 25% when active.

Component logic updates:

• Modified ProgressBarValue.tsx to detect when the value prop is -1 and set the progress bar to indeterminate mode by passing the appropriate props to StyledProgress. [1] [2]
• Adjusted the component to hide the numeric value display when in indeterminate mode, ensuring a cleaner UI.

Enregistrament.de.pantalla.del.2026-01-28.17-44-20.mp4

[Copilot]

Pull request overview

This pull request adds an indeterminate loading state to the ProgressBarValue widget, which is triggered when the value prop is set to -1. This enhancement provides better visual feedback when progress is unknown or cannot be determined.

Changes:

• Added indeterminate state detection and animated progress indicator when value is -1
• Implemented CSS keyframe animation that moves a 25% width indicator across the progress bar
• Conditionally hides the numeric percentage display during indeterminate mode

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
ProgressBarValue.tsx	Added isIndeterminate flag logic, updated StyledProgress props, and conditionally renders text value based on state
ProgressBarValue.styles.tsx	Created keyframe animation for indeterminate state and updated StyledProgress to accept $isIndeterminate prop with conditional styling

Comments suppressed due to low confidence (1)

src/components/widgets/ProgressBar/ProgressBarValue/ProgressBarValue.tsx:10

• The textValue calculation has a bug when value is -1. Since the code uses (value || 0), when value is -1 (a falsy value in JavaScript), it will be replaced with 0, resulting in the textValue being "0%" instead of properly handling the indeterminate state. Although the textValue is hidden in indeterminate mode, this creates an unnecessary calculation with incorrect logic. Consider updating the logic to handle -1 explicitly, or move the textValue calculation inside the conditional rendering block where it's actually used.

  const textValue = `${(value || 0).toLocaleString("en-US", {
    minimumIntegerDigits: 1,
    maximumFractionDigits: 4,
    useGrouping: false,
  })}%`;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.