Do not render invisible components

src/components/gui/gui.jsx

@@ -79,10 +79,10 @@ const GUIComponent = props => {
                                 </Box>
                             </TabPanel>
                             <TabPanel className={tabClassNames.tabPanel}>
-                                <CostumeTab vm={vm} />
+                                {tabIndex === 1 ? <CostumeTab vm={vm} /> : null}
                             </TabPanel>
                             <TabPanel className={tabClassNames.tabPanel}>
-                                <SoundTab vm={vm} />
+                                {tabIndex === 2 ? <SoundTab vm={vm} /> : null}
                             </TabPanel>
                         </Tabs>
                     </Box>

src/components/target-pane/target-pane.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import VM from 'scratch-vm';
 
-import Box from '../box/box.jsx';
 import BackdropLibrary from '../../containers/backdrop-library.jsx';
 import CostumeLibrary from '../../containers/costume-library.jsx';
 import SoundLibrary from '../../containers/sound-library.jsx';
@@ -43,7 +42,7 @@ const TargetPane = ({
     vm,
     ...componentProps
 }) => (
-    <Box
+    <div
         className={styles.targetPane}
         {...componentProps}
     >
@@ -61,7 +60,7 @@ const TargetPane = ({
             onNewSpriteClick={onNewSpriteClick}
             onSelectSprite={onSelectSprite}
         />
-        <Box className={styles.stageSelectorWrapper}>
+        <div className={styles.stageSelectorWrapper}>
             {stage.id && <StageSelector
                 assetId={
                     stage.costume &&
@@ -72,30 +71,35 @@ const TargetPane = ({
                 selected={stage.id === editingTarget}
                 onSelect={onSelectSprite}
             />}
-            <Box>
-                <SpriteLibrary
-                    visible={spriteLibraryVisible}
-                    vm={vm}
-                    onRequestClose={onRequestCloseSpriteLibrary}
-                />
-                <CostumeLibrary
-                    visible={costumeLibraryVisible}
-                    vm={vm}
-                    onRequestClose={onRequestCloseCostumeLibrary}
-                />
-                <SoundLibrary
-                    visible={soundLibraryVisible}
-                    vm={vm}
-                    onRequestClose={onRequestCloseSoundLibrary}
-                />
-                <BackdropLibrary
-                    visible={backdropLibraryVisible}
-                    vm={vm}
-                    onRequestClose={onRequestCloseBackdropLibrary}
-                />
-            </Box>
-        </Box>
-    </Box>
+            <div>
+                {spriteLibraryVisible ? (
+                    <SpriteLibrary
+                        vm={vm}
+                        onRequestClose={onRequestCloseSpriteLibrary}
+                    />
+                ) : null}
+                {costumeLibraryVisible ? (
+                    <CostumeLibrary
+                        vm={vm}
+                        onRequestClose={onRequestCloseCostumeLibrary}
+                    />
+                ) : null}
+                {soundLibraryVisible ? (
+                    <SoundLibrary
+                        vm={vm}
+                        onRequestClose={onRequestCloseSoundLibrary}
+                    />
+                ) : null}
+                {backdropLibraryVisible ? (
+                    <BackdropLibrary
+                        vm={vm}
+                        onRequestClose={onRequestCloseBackdropLibrary}
+                    />
+                ) : null}
+
+            </div>
+        </div>
+    </div>
 );
 
 const spriteShape = PropTypes.shape({

src/containers/backdrop-library.jsx

@@ -27,9 +27,9 @@ class BackdropLibrary extends React.Component {
     render () {
         return (
             <LibraryComponent
+                visible
                 data={backdropLibraryContent}
                 title="Backdrop Library"
-                visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
             />
@@ -39,7 +39,6 @@ class BackdropLibrary extends React.Component {
 
 BackdropLibrary.propTypes = {
     onRequestClose: PropTypes.func,
-    visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 

src/containers/costume-library.jsx

@@ -27,9 +27,9 @@ class CostumeLibrary extends React.PureComponent {
     render () {
         return (
             <LibraryComponent
+                visible
                 data={costumeLibraryContent}
                 title="Costume Library"
-                visible={this.props.visible}
                 onItemSelected={this.handleItemSelected}
                 onRequestClose={this.props.onRequestClose}
             />
@@ -39,7 +39,6 @@ class CostumeLibrary extends React.PureComponent {
 
 CostumeLibrary.propTypes = {
     onRequestClose: PropTypes.func,
-    visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 

src/containers/sound-library.jsx

@@ -74,9 +74,9 @@ class SoundLibrary extends React.PureComponent {
 
         return (
             <LibraryComponent
+                visible
                 data={soundLibraryThumbnailData}
                 title="Sound Library"
-                visible={this.props.visible}
                 onItemMouseEnter={this.handleItemMouseEnter}
                 onItemMouseLeave={this.handleItemMouseLeave}
                 onItemSelected={this.handleItemSelected}
@@ -88,7 +88,6 @@ class SoundLibrary extends React.PureComponent {
 
 SoundLibrary.propTypes = {
     onRequestClose: PropTypes.func,
-    visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 

src/containers/sprite-library.jsx

@@ -64,9 +64,9 @@ class SpriteLibrary extends React.PureComponent {
     render () {
         return (
             <LibraryComponent
+                visible
                 data={this.state.sprites}
                 title="Sprite Library"
-                visible={this.props.visible}
                 onItemMouseEnter={this.handleMouseEnter}
                 onItemMouseLeave={this.handleMouseLeave}
                 onItemSelected={this.handleItemSelect}
@@ -78,7 +78,6 @@ class SpriteLibrary extends React.PureComponent {
 
 SpriteLibrary.propTypes = {
     onRequestClose: PropTypes.func,
-    visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };