Ad

Why Is There A MDL Spinner Residue After My Promise Is Resolved In React?

- 1 answer

I'm trying to display a spinner while fetching my API, then replace this spinner by the results I receive from my API call.

Basically I have a isFetching state set to true until my promise is resolved, so my render function looks like this:

render: function() {
  if (this.state.isFetching) {
    return <div className="mdl-spinner mdl-js-spinner is-active" />;
  } else {
    return <div>This is where I display my results.</div>;
  }
}

It's working well and seems logic to me but, as the rendered function gets more complex, the spinner is appended to the returned html.

The spinner.

<div>This is where I display my results.</div>
<!-- The appeneded spinner, each div corresponding to a color (yellow, green, blue, red) -->
<div class="mdl-spinner__layer mdl-spinner__layer-1"></div>
<div class="mdl-spinner__layer mdl-spinner__layer-2"></div>
<div class="mdl-spinner__layer mdl-spinner__layer-3"></div>
<div class="mdl-spinner__layer mdl-spinner__layer-4"></div>

Why is this spinner residue appended after my promise is resolved? Am I doing something conceptually wrong? Is it related to React or MDL?

I made a JS fiddle where I managed to reproduce the issue.

Note that if you simplify the <SubComponent />'s render function (such as by removing the img tag, the issue doesn't appear).


Edit

Thanks to Garbee's answer I ended up with this solution:

To ensure the node (responsible for creating internal nodes for styling) is properly destroyed after being upgraded, wrap it (in this case the spinner) in another element node.

render: function() {
  if (this.state.isFetching) {
    return (
      <div>
        <div className="mdl-spinner mdl-js-spinner is-active" />
      </div>
    );
  } else {
    return <div>This is where I display my results.</div>;
  }
}

The updated JS fiddle.

Ad

Answer

This is because the spinner is creating internal nodes for styling as it is initialized. I'd assume react is just creating then destroying the node (which makes me question how it is upgraded in the example case provided since I don't see that.) Which, depending on how it destroys it could leave some cruft around.

Nothing can be done about this in MDL 1.x. We are working in 2.x to do no magic node creation for developers which should make things more clear.

Ad
source: stackoverflow.com
Ad