From 325626e46d9e755b1aa2b5a337525d89bb53a492 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 11 Jul 2020 16:49:46 -0700
Subject: [PATCH] Only render the modal when needed

---
 .../scripts/components/server/files/FileDropdownMenu.tsx     | 5 ++++-
 resources/scripts/components/server/files/MassActionsBar.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 0208d723f..e75f8e16b 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -116,12 +116,15 @@ export default ({ file }: { file: FileObject }) => {
             renderToggle={onClick => (
                 <div css={tw`p-3 hover:text-white`} onClick={onClick}>
                     <FontAwesomeIcon icon={faEllipsisH}/>
+                    {!!modal &&
                     <RenameFileModal
+                        visible
+                        appear
                         files={[ file.name ]}
-                        visible={!!modal}
                         useMoveTerminology={modal === 'move'}
                         onDismissed={() => setModal(null)}
                     />
+                    }
                     <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
                 </div>
             )}
diff --git a/resources/scripts/components/server/files/MassActionsBar.tsx b/resources/scripts/components/server/files/MassActionsBar.tsx
index 88524546b..6df43ecca 100644
--- a/resources/scripts/components/server/files/MassActionsBar.tsx
+++ b/resources/scripts/components/server/files/MassActionsBar.tsx
@@ -76,12 +76,15 @@ const MassActionsBar = () => {
                 >
                     Deleting files is a permanent operation, you cannot undo this action.
                 </ConfirmationModal>
+                {showMove &&
                 <RenameFileModal
                     files={selectedFiles}
-                    visible={showMove}
+                    visible
+                    appear
                     useMoveTerminology
                     onDismissed={() => setShowMove(false)}
                 />
+                }
                 <div css={tw`rounded p-4 mb-6`} style={{ background: 'rgba(0, 0, 0, 0.35)' }}>
                     <Button size={'xsmall'} css={tw`mr-4`} onClick={() => setShowMove(true)}>
                         <FontAwesomeIcon icon={faLevelUpAlt} css={tw`mr-2`}/> Move