🐛 Bug Report

ProgressBar does not show fast updates correctly like showing download progress of a file.

🤔 Expected Behavior

Show progress according to updates.

😯 Current Behavior

Progress updates are manipulated by a CSS transition which is why fast updates don´t get reflected correctly.

💁 Possible Solution

Add option to turn off CSS transition.

🔦 Context

Showing progress for file downloads with fast progress updates.

💻 Code Sample

import { darkTheme, ProgressBar, Provider } from '@adobe/react-spectrum'
import React, { PureComponent } from 'react'

type ProgressAppProps = {}

type ProgressAppState = {
  value: number
}

export default class ProgressApp extends PureComponent<ProgressAppProps, ProgressAppState> {
  constructor(props: ProgressAppProps) {
    super(props)

    this.state = {
      value: 0,
    }

    this.updateValue()
  }

  updateValue(): void {
    const { value } = this.state
    if (value < 100) {
      this.setState({ value: value + 1 })

      setTimeout(() => {
        this.updateValue()
      }, 20)
    }
  }

  render(): JSX.Element {
    const { value } = this.state

    return (
      <Provider theme={darkTheme} height='100%'>
        <ProgressBar label='test' value={value} />
      </Provider>
    )
  }
}

🌍 Your Environment

Software	Version(s)
react-spectrum	3.3.0
Browser	Chrome
Operating System	MacOS

🧢 Your Company/Team

Adobe

adobe / react-spectrum

ProgressBar does not show fast updates correctly #1104