Use Visible component for conditionally showing elements

Author: Leitsi

ui/src/components/timetables/import/ConfirmTimetablesImportModal.tsx

@@ -4,6 +4,7 @@ import {
   useConfirmTimetablesImportUIAction,
   useTimetablesImport,
 } from '../../../hooks';
+import { Visible } from '../../../layoutComponents';
 import { Modal, ModalBody, ModalHeader } from '../../../uiComponents';
 import { ConfirmTimetablesImportForm } from './ConfirmTimetablesImportForm';
 import { FormState, getDefaultValues } from './TimetablesImportFormSchema';
@@ -47,7 +48,7 @@ export const ConfirmTimetablesImportModal: React.FC<Props> = ({
         heading={t('confirmTimetablesImportModal.title')}
       />
       <ModalBody>
-        {formReadyForRender && (
+        <Visible visible={formReadyForRender}>
           <ConfirmTimetablesImportForm
             onSubmit={onSave}
             onCancel={onClose}
@@ -56,7 +57,7 @@ export const ConfirmTimetablesImportModal: React.FC<Props> = ({
             }
             defaultValues={getDefaultValues({ importingSomeSpecialDays })}
           />
-        )}
+        </Visible>
       </ModalBody>
     </Modal>
   );

ui/src/components/timetables/import/PreviewTimetablesPage.tsx

@@ -107,15 +107,15 @@ export const PreviewTimetablesPage = (): JSX.Element => {
         <div className="py-9 px-16">
           <Row className="items-center space-x-14">
             <h3>{t('timetablesPreview.contentUsage')}</h3>
-            {formReadyForRender && (
+            <Visible visible={formReadyForRender}>
               <ConfirmPreviewedTimetablesImportForm
                 ref={formRef}
                 fetchRouteDeviations={fetchRouteDeviations}
                 clearRouteDeviations={clearRouteDeviations}
                 onSubmit={onSubmit}
                 defaultValues={getDefaultValues({ importingSomeSpecialDays })}
               />
-            )}
+            </Visible>
           </Row>
           <Visible visible={inconsistentSpecialDayPrioritiesStaged}>
             <SpecialDayMixedPrioritiesWarning />