From the Land of the Spinning Windows

We at Smart Reporting create novel software for diagnostic medicine. We provide fully integrated image analysis and reporting in research and clinical routine.

However, while enhancing our software we observed an interesting bug and we would like to share its story with you. 

Medical Templates

One integral part of our software are so-called templates. These templates allow the physician to report medical findings in a structured and machine readable way.

For example: after a car accident a typical diagnosis is a whiplash injury. The physician can use our software to document his findings in a highly structured, standardized way.

Spinning Windows

We have a multi step validation process in place to approve our templates. But instead of medical content we saw this:

Obviously, this is the kind of image that would surely give the physician a whiplash injury after some time. We actually had no idea why or how this bug occurred and started investigating.

The Great Bug Hunt

So we had a spinning window that was never supposed to spin and had no real logic built in to it to do so 🤷‍♀️.

Surprisingly, the bug only occurred in Internet Explorer 11 (or perhaps not so surprising?). Our first lead was a loading icon that actually was supposed to spin while loading the data. The related code looked essentially like this:

A bug report for font awesome deals with a related topic: if a spinning font awesome icon was told to stop (i.e. removing the fa-spin class) it continued spinning. It was suspected that Internet Explorer misses to redraw the icon after removing the class and therefore continued spinning.

The bug observed was similar, but essentially not the same. In our case a window that never was supposed to spin and never had a spinning tag on it.

So how could the totally unrelated content start to spin?

React and the Virtual DOM

We are using React to compose our software with re-usable components. One of the big selling points of React is the Virtual DOM. From react's documentation:

Adding and removing elements from the DOM is expensive. So React re-uses existing elements if one would be removed and an element of the same type would be re-added. This is one of key concepts that makes React application smooth and fun to use.

Putting everything together

We are reaching the grand finale. Our ingredients are: a bug in the Internet Explorer that misses some redraws and a virtual DOM that re-uses parts of our website.

How our window started to spin:

1. Our website is loading data and the div with the spinning icon appears.
2. The content is loaded, the spinner disappears and the actual content is about to be added.
   • React notices that we want to remove one div (the spinning icon) and add another div (the content).
   • Both are of type div and the virtual DOM decides to reuse the element.
   • The content is loaded into the former spinner div.
3. Internet Explorer misses to update the former spinning div and keeps rotating.
4. The content is now rotating.

So the combination of Virtual DOM and a bug in the Internet Explorer caused our window to spin.

The Solution

Hence, the fix is pretty easy. Use a separate div and the font awesome FontIcon class:

This code prevents further whiplash injuries while using our software.

If you have comments on this bug or had similar a similar experience with your software please let us know!