Merge pull request #2831 from bodnia/fix-2796

fix badge async load

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;AAsoGA;AAy4HA;AA+7FA;AA2mCA;AAg+BA;AAyiCA;AAu5BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;AAsoGA;AAy4HA;AA+7FA;AA2mCA;AAm/BA;AAgiCA;AA25BA","sourceRoot":""}

src/core/components/online-validator-badge.jsx

@@ -40,8 +40,60 @@ export default class OnlineValidatorBadge extends React.Component {
 
         return (<span style={{ float: "right"}}>
                 <a target="_blank" href={`${ this.state.validatorUrl }/debug?url=${ this.state.url }`}>
-                    <img alt="Online validator badge" src={`${ this.state.validatorUrl }?url=${ this.state.url }`} />
+                    <ValidatorImage src={`${ this.state.validatorUrl }?url=${ this.state.url }`} alt="Online validator badge"/>
                 </a>
             </span>)
     }
 }
+
+
+class ValidatorImage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loaded: false,
+      error: false
+    };
+  }
+
+  componentDidMount() {
+    const img = new Image();
+    img.onload = () => {
+      this.setState({
+        loaded: true
+      });
+    }
+    img.onerror = () => {
+      this.setState({
+        error: true
+      });
+    }
+    img.src = this.props.src;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.src !== this.props.src) {
+      const img = new Image();
+      img.onload = () => {
+        this.setState({
+          loaded: true
+        });
+      }
+      img.onerror = () => {
+        this.setState({
+          error: true
+        });
+      }
+      img.src = nextProps.src;
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return <img alt={"Error"} />
+    } else if (!this.state.loaded) {
+      return <img alt= {"Loading..."} />
+    }
+    return <img src={this.props.src} alt={this.props.alt} />
+  }
+}