Improve interaction between compile and runtime overlays

packages/react-dev-utils/webpackHotDevClient.js

@@ -38,7 +38,7 @@ function createOverlayIframe(onIframeLoad) {
   iframe.style.width = '100vw';
   iframe.style.height = '100vh';
   iframe.style.border = 'none';
-  iframe.style.zIndex = 9999999999;
+  iframe.style.zIndex = 2147483647;
   iframe.onload = onIframeLoad;
   return iframe;
 }
@@ -192,22 +192,24 @@ function clearOutdatedErrors() {
 // Successful compilation.
 function handleSuccess() {
   clearOutdatedErrors();
-  destroyErrorOverlay();
 
   var isHotUpdate = !isFirstCompilation;
   isFirstCompilation = false;
   hasCompileErrors = false;
 
   // Attempt to apply hot updates or reload.
   if (isHotUpdate) {
-    tryApplyUpdates();
+    tryApplyUpdates(function onHotUpdateSuccess() {
+      // Only destroy it when we're sure it's a hot update.
+      // Otherwise it would flicker right before the reload.
+      destroyErrorOverlay();
+    });
   }
 }
 
 // Compilation with warnings (e.g. ESLint).
 function handleWarnings(warnings) {
   clearOutdatedErrors();
-  destroyErrorOverlay();
 
   var isHotUpdate = !isFirstCompilation;
   isFirstCompilation = false;
@@ -231,6 +233,9 @@ function handleWarnings(warnings) {
       // Only print warnings if we aren't refreshing the page.
       // Otherwise they'll disappear right away anyway.
       printWarnings();
+      // Only destroy it when we're sure it's a hot update.
+      // Otherwise it would flicker right before the reload.
+      destroyErrorOverlay();
     });
   } else {
     // Print initial warnings immediately.

packages/react-error-overlay/src/styles.js

@@ -15,7 +15,7 @@ const iframeStyle = {
   width: '100%',
   height: '100%',
   border: 'none',
-  'z-index': 1337,
+  'z-index': 2147483647 - 1, // below the compile error overlay
 };
 
 const overlayStyle = {