Only render the modal when needed

Author: DaneEveritt

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>
             )}

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