Fallback to setInterval if DOMContentLoaded fails

src/Frame.jsx

@@ -56,7 +56,10 @@ export class Frame extends Component {
   componentWillUnmount() {
     this._isMounted = false;
 
-    this.nodeRef.current.removeEventListener('load', this.handleLoad);
+    this.nodeRef.current.removeEventListener(
+      'DOMContentLoaded',
+      this.handleLoad
+    );
   }
 
   getDoc() {
@@ -83,12 +86,19 @@ export class Frame extends Component {
   };
 
   handleLoad = () => {
+    clearInterval(this.loadCheck);
     // Bail update as some browsers will trigger on both DOMContentLoaded & onLoad ala firefox
     if (!this.state.iframeLoaded) {
       this.setState({ iframeLoaded: true });
     }
   };
 
+  // In certain situations on a cold cache DOMContentLoaded never gets called
+  // fallback to an interval to check if that's the case
+  loadCheck = setInterval(function loadCheckCallback() {
+    this.handleLoad();
+  }, 500);
+
   renderFrameContents() {
     if (!this._isMounted) {
       return null;
@@ -135,6 +145,7 @@ export class Frame extends Component {
     delete props.contentDidMount;
     delete props.contentDidUpdate;
     delete props.forwardedRef;
+
     return (
       <iframe {...props} ref={this.setRef} onLoad={this.handleLoad}>
         {this.state.iframeLoaded && this.renderFrameContents()}

webpack.config.js

@@ -24,5 +24,10 @@ module.exports = {
     loaders: [
       { test: /\.js(x|)/, loaders: ['babel-loader'], exclude: /node_modules/ }
     ]
+  },
+  devServer: {
+    headers: {
+      'Cache-Control': 'max-age=10'
+    }
   }
 };