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

src/components/modals/Modals.jsx

@@ -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>

src/components/modals/main/Main.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
-import Settings from './tabs/Settings';
-import Addons from './tabs/Addons';
-import Marketplace from './tabs/Marketplace';
-
 import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
 
+const Settings = React.lazy(() => import('./tabs/Settings'));
+const Addons = React.lazy(() => import('./tabs/Addons'));
+const Marketplace = React.lazy(() => import('./tabs/Marketplace'));
+
+const renderLoader = () => <></>;
+
 export default function MainModal(props) {
   const language = window.language.modals.main.navbar;
 
@@ -15,9 +17,21 @@ export default function MainModal(props) {
     <>
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
       <Tabs navbar={true}>
-        <div label={language.settings}><Settings/></div>
-        <div label={language.addons}><Addons/></div>
-        <div label={language.marketplace}><Marketplace/></div>
+        <div label={language.settings}>
+          <React.Suspense fallback={renderLoader()}>
+            <Settings/>
+          </React.Suspense>
+        </div>
+        <div label={language.addons}>
+          <React.Suspense fallback={renderLoader()}>
+            <Addons/>
+          </React.Suspense>
+        </div>
+        <div label={language.marketplace}>
+          <React.Suspense fallback={renderLoader()}>
+            <Marketplace/>
+          </React.Suspense>
+        </div>
       </Tabs>
     </>
   );