Material-ui: Progress Indicators Animation

[voxbox-io]

Problem description

When a Component renders a progress indicator conditionally based on it's state, the progress indicator does not animate.

Steps to reproduce

import React, { Component, PropTypes } from 'react';
import LinearProgress from 'material-ui/LinearProgress';

class Test extends Component {

state = {loading: true}

// set state.loading to false after some promise

render() {
let prog;
if (this.state.loading) {prog = }

return (
prog
)
}
}

The progress above does appears but does not animate, while:

render() {
let prog =

return (
prog
)
}

Animates fine.

It seems the same issue is with all loading indicators.

Versions

• Material-UI: [email protected]
• React: [email protected]
• Browser: Chrome 53.0.2785.116

[hyojin]

I'm faced with similar problem. Because animation starts when the component is mounted, I think you need to re-mount the component to animate or using css trick to show/hide with 2 different components. I changed some code, but I'm a noob in React.js so I'm not sure this is correct way.

LinearProgress.js

render() {
    ...
    const {prepareStyles} = this.context.muiTheme;
    const styles = getStyles(this.props, this.context);

    // when mode is changed, restart to animate
    if (this.props.mode === 'indeterminate') this.startUpdate();

Any idea?

[hyojin]

I decided just to follow the google's guideline. nvm

[unscene]

Would you mind sharing how the guidelines solved this problem?

[unscene]

Actually I have a nifty trick to fix this sort of.

I made my key whatever the mode string ends up being.

Based on this comment: http://stackoverflow.com/a/35793185

[hyojin]

@unscene I can't see your code above now, if I remember correctly, what I did is basically same as you did. and I tried with version 0.16.0-rc1, but it worked.

[james-lukensow]

I'm seeing the exact issue.

If you load the component initially with the progress indicator displayed, it works fine.

However, if you conditionally show the progress indicator, such while fetching data, the indicator is displayed, but without the animations.

Anyone come up with any solutions to get around this?

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.