Fix iframe detecting for react devtools if no iframe is loaded or available (codesandbox#2302)

Fixes codesandbox#2300

Author: CompuIves

packages/app/src/app/components/Preview/DevTools/React-Devtools/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext, useCallback } from 'react';
+import delay from '@codesandbox/common/lib/utils/delay';
 import { initialize } from 'react-devtools-inline/frontend';
 import { dispatch, actions } from 'codesandbox-api';
 import { ThemeContext } from 'styled-components';
@@ -9,24 +10,43 @@ import { DevToolProps } from '..';
 const DevTools = (props: DevToolProps) => {
   const [ReactDevTools, setDevTools] = useState(null);
   const theme = useContext(ThemeContext);
+  const unmounted = React.useRef(false);
 
-  useEffect(() => {
-    const iframe = document.getElementById(
+  const loadIframe = useCallback(async () => {
+    let iframe = document.getElementById(
       'sandbox-preview'
     ) as HTMLIFrameElement;
-    const contentWindow = iframe.contentWindow;
-
-    setDevTools(initialize(contentWindow));
-    iframe.onload = () => {
-      contentWindow.postMessage(
-        {
-          type: 'activate',
-        },
-        '*'
-      );
-    };
+
+    // iframe hasn't initialized or just isn't there
+    while (iframe === null && !unmounted.current) {
+      // Retry every second
+      // eslint-disable-next-line
+      await delay(1000);
+      iframe = document.getElementById('sandbox-preview') as HTMLIFrameElement;
+    }
+
+    if (iframe) {
+      const contentWindow = iframe.contentWindow;
+
+      setDevTools(initialize(contentWindow));
+      iframe.onload = () => {
+        contentWindow.postMessage(
+          {
+            type: 'activate',
+          },
+          '*'
+        );
+      };
+    }
   }, []);
 
+  useEffect(() => {
+    loadIframe();
+    return () => {
+      unmounted.current = true;
+    };
+  }, [loadIframe]);
+
   if (props.hidden) {
     return null;
   }