Fix external window not updating if preview is hidden

Author: Ives van Hoorne

packages/app/src/app/components/Preview/index.js

@@ -31,6 +31,7 @@ type Props = {
   showNavigation?: boolean,
   inactive?: boolean,
   dragging?: boolean,
+  hide: boolean,
 };
 
 type State = {
@@ -315,10 +316,15 @@ class BasePreview extends React.Component<Props, State> {
       settings,
       isInProjectView,
       dragging,
+      hide,
     } = this.props;
     const { historyPosition, history, urlInAddressBar } = this.state;
     const url = urlInAddressBar || frameUrl(sandbox.id);
 
+    if (hide) {
+      return null;
+    }
+
     return (
       <Container style={{ flex: 1 }}>
         {showNavigation && (

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/FlyingContainer.js

@@ -208,6 +208,7 @@ class FlyingContainer extends React.Component<Props, State> {
   };
 
   render() {
+    const { hide } = this.props;
     const { previewWindow } = this.props.store.editor;
 
     const width = this.state.width || previewWindow.width;
@@ -243,9 +244,12 @@ class FlyingContainer extends React.Component<Props, State> {
             width: width || '50%',
             flex: width ? `0 0 ${width}px` : undefined,
             height,
-            boxShadow: '0 3px 8px rgba(0, 0, 0, 0.5)',
+            boxShadow: hide ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.5)',
             zIndex: 60,
             cursor: 'move',
+
+            visiblity: hide ? 'hidden' : undefined,
+            pointerEvents: hide ? 'none' : undefined,
           }}
           ref={this.updateBounds}
         >

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.js

@@ -220,12 +220,10 @@ class Preview extends React.Component<Props, State> {
       code: store.editor.currentPackageJSONCode,
     };
 
-    if (!store.editor.previewWindow.content) {
-      return null;
-    }
+    const hide = !store.editor.previewWindow.content;
 
     return (
-      <FlyingContainer onPositionChange={this.resetAlignment}>
+      <FlyingContainer hide={hide} onPositionChange={this.resetAlignment}>
         {({ resize }) => (
           <BasePreview
             onInitialized={this.onPreviewInitialized}
@@ -239,6 +237,7 @@ class Preview extends React.Component<Props, State> {
             onAction={action =>
               signals.editor.previewActionReceived({ action })
             }
+            hide={hide}
             onOpenNewWindow={() =>
               this.props.signals.preferences.viewModeChanged({
                 showEditor: true,