Improve performance by not rendering children in explorer (codesandbox#3413)

* Improve performance by not rendering children in explorer

* Fix file icon

* Move open condition

* Remove open type

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Navigation/Navigation.tsx

@@ -12,7 +12,7 @@ import { TippyProps } from '@tippy.js/react';
 import ConfigurationIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/cog.svg';
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
-import FilesIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/file.svg';
+import FilesIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/file-activity-bar.svg';
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import GitHubIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/github.svg';

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.tsx

@@ -14,7 +14,7 @@ export const Overlay = styled.div<{ isOver: boolean }>`
   display: ${props => (props.isOver ? 'block' : 'none')};
 `;
 
-export const Opener = styled.div<{ open: boolean }>`
-  height: ${props => (props.open ? '100%' : '0px')};
+export const Opener = styled.div`
+  height: 100%;
   overflow: hidden;
 `;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx

@@ -325,47 +325,49 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
           />
         </EntryContainer>
       )}
-      <Opener open={open}>
-        {creating === 'directory' && (
-          <Entry
-            id=""
-            title=""
-            state="editing"
-            type="directory"
-            depth={depth + 1}
+      {open && (
+        <Opener>
+          {creating === 'directory' && (
+            <Entry
+              id=""
+              title=""
+              state="editing"
+              type="directory"
+              depth={depth + 1}
+              renameValidator={validateModuleTitle}
+              rename={createDirectory}
+              onRenameCancel={resetState}
+            />
+          )}
+          <DirectoryChildren
+            depth={depth}
+            renameModule={renameModule}
+            parentShortid={shortid}
             renameValidator={validateModuleTitle}
-            rename={createDirectory}
-            onRenameCancel={resetState}
+            deleteEntry={confirmDeleteModule}
+            setCurrentModule={setCurrentModule}
+            markTabsNotDirty={markTabsNotDirty}
+            discardModuleChanges={confirmDiscardChanges}
+            getModulePath={getModulePath}
           />
-        )}
-        <DirectoryChildren
-          depth={depth}
-          renameModule={renameModule}
-          parentShortid={shortid}
-          renameValidator={validateModuleTitle}
-          deleteEntry={confirmDeleteModule}
-          setCurrentModule={setCurrentModule}
-          markTabsNotDirty={markTabsNotDirty}
-          discardModuleChanges={confirmDiscardChanges}
-          getModulePath={getModulePath}
-        />
-        <DirectoryEntryModal
-          isOpen={Boolean(modalConfirm)}
-          onClose={closeModals}
-          {...modalConfirm}
-        />
-        {creating === 'module' && (
-          <Entry
-            id=""
-            title=""
-            state="editing"
-            depth={depth + 1}
-            renameValidator={validateModuleTitle}
-            rename={createModule}
-            onRenameCancel={resetState}
+          <DirectoryEntryModal
+            isOpen={Boolean(modalConfirm)}
+            onClose={closeModals}
+            {...modalConfirm}
           />
-        )}
-      </Opener>
+          {creating === 'module' && (
+            <Entry
+              id=""
+              title=""
+              state="editing"
+              depth={depth + 1}
+              renameValidator={validateModuleTitle}
+              rename={createModule}
+              onRenameCancel={resetState}
+            />
+          )}
+        </Opener>
+      )}
     </div>
   );
 };