Can't change plot div className

[zachschultz]

I am trying to style my graph with a loading animation when there is no data in my component's props yet.

Here is a gist with what my code looks like: https://gist.github.com/zachschultz/b3e7261cd774d0c54b21c2100381c6fb

UPDATE: Adding a console.log statement into the div makes this magically work...still have no idea why.

Essentially, if the graph data doesn't exist, I want to show a Plotly graph that will be grayed out with a spinning loading logo on it. However, this isn't working, and when my graph data comes in the graph itself doesn't re-render with data, it just stays blank.

I know for a fact the data is there and that the graph data state is being updated as well, so I'm really not sure what is going wrong here.

[benjeffery]

Hi,
It's hard to diagnose this without a minimal test case (eg jsfiddle). Looking at your code, without the console.log the same react component will be reused - which should work but isn't in your case. Adding the console.log makes React use a new component. You could achieve the same thing by giving the two components differing "key" props.
I'll try and get a test case going.

[benjeffery]

Interestingly, the bug only occurs when the two components have differing classNames.

[benjeffery]

I raised an issue upstream for this. Thanks for the report.

[benjeffery]

As per the discussion at plotly/plotly.js#916 changing class on the plot div is not a supported action. I will add an error message for this scenario and close this ticket when that is done.

[benjeffery]

We stopped using redraw for now, so closing this.