feat: lazy load widgets and modal sections, fix transition on settings modal

This commit is contained in:
David Ralph
2021-04-11 11:17:09 +01:00
parent 149bcdbe05
commit 465596d22d
7 changed files with 56 additions and 26 deletions

View File

@@ -1,11 +1,11 @@
import React from 'react';
import Main from './main/Main';
import Navbar from '../widgets/navbar/Navbar';
import Modal from 'react-modal';
// Modals are lazy loaded as the user won't use them every time they open a tab
const Main = React.lazy(() => import('./main/Main'));
const Welcome = React.lazy(() => import('./welcome/Welcome'));
const Feedback = React.lazy(() => import('./feedback/Feedback'));
const renderLoader = () => <></>;
@@ -40,10 +40,10 @@ export default class Modals extends React.PureComponent {
return (
<>
<Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
<Main modalClose={() => this.setState({ mainModal: false })}/>
</Modal>
<React.Suspense fallback={renderLoader()}>
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
<Main modalClose={() => this.setState({ mainModal: false })}/>
</Modal>
<Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
<Welcome modalClose={() => this.closeWelcome()}/>
</Modal>