Ok, I took some time to look at this in more detail this morning I think I see what’s going on. The fas fa-spinner class(es) seems to be doing something where it replaces the element with a SVG spinner in the DOM.
You can see the original node there in an HTML comment. And because this is messing with the DOM outside of react, when react tries to resolve the DOM with its own internal representation, things go whackadoo.
To combat this, you can add the element dynamically in a way that react won’t try to remove it. To do that, you can do something like this:
<div className="loading">
<h4 ref={ el => this.h4 = el }>Loading </h4>
</div>
This is in render for the loading JSX. The change is that the spinner <i> is removed completely and we’ve added a ref to the parent <h4>.
Now in componentDidMount we can add that <i> back in.
componentDidMount()
{
// ...
var spinner = document.createElement('i');
spinner.className = 'fas fa-spinner';
this.h4.appendChild(spinner);
}
Because this isn’t in the JSX, react won’t try to find and remove it with render updates - which is what we want because it won’t exist after it gets replaced by the spinner. But, this element will get removed with its parent <h4> when react ultimately removes that in a subsequent render update, so it’s not like this unmanaged element will be hanging around indefinitely.
