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>
     </>
   );

src/components/widgets/Widgets.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import Clock from './time/Clock';
-import Greeting from './greeting/Greeting';
-import Quote from './quote/Quote';
-import Search from './search/Search';
-import Date from './time/Date';
-import QuickLinks from './quicklinks/QuickLinks';
-import Weather from './weather/Weather';
+const Clock = React.lazy(() => import('./time/Clock'));
+const Greeting = React.lazy(() => import('./greeting/Greeting'));
+const Quote = React.lazy(() => import('./quote/Quote'));
+const Search = React.lazy(() => import('./search/Search'));
+const Date = React.lazy(() => import('./time/Date'));
+const QuickLinks = React.lazy(() => import('./quicklinks/QuickLinks'));
+const Weather = React.lazy(() => import('./weather/Weather'));
+const renderLoader = () => <></>;
 
 export default class Widgets extends React.PureComponent {
   constructor() {
@@ -71,9 +72,11 @@ export default class Widgets extends React.PureComponent {
 
     return (
       <div id='widgets'>
-        {this.enabled('searchBar') ? <Search/> : null}
-        {elements}
-        {this.enabled('weatherEnabled') && (localStorage.getItem('offlineMode') === 'false') ? <Weather/> : null}
+        <React.Suspense fallback={renderLoader()}>
+          {this.enabled('searchBar') ? <Search/> : null}
+          {elements}
+          {this.enabled('weatherEnabled') && (localStorage.getItem('offlineMode') === 'false') ? <Weather/> : null}
+        </React.Suspense>
       </div>
     );
   }

src/components/widgets/background/Background.jsx

@@ -71,8 +71,11 @@ export default class Background extends React.PureComponent {
       const backgroundImage = document.querySelector('#backgroundImage');
       backgroundImage.classList.add('backgroundPreload');
 
+      // preloader for background transition
       let preloader = document.createElement('img');
       preloader.src = url;
+
+      // once image has loaded, add the fade-in transition
       preloader.addEventListener('load', () => {
         backgroundImage.classList.remove('backgroundPreload');
         backgroundImage.classList.add('fade-in');
@@ -82,6 +85,13 @@ export default class Background extends React.PureComponent {
           `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
         ); 
         preloader = null;
+
+        // wait before showing photoinformation, should make this better with state or something later but lazy
+        if (this.state.photoInfo.hidden === false) {
+          setTimeout(() => {
+            document.querySelector('.photoInformation').style.display = 'block';
+          }, 800);
+        }
       });
     } else {
       document.querySelector('#backgroundImage').setAttribute(

src/components/widgets/background/PhotoInformation.jsx

@@ -31,7 +31,7 @@ export default function PhotoInformation(props) {
   }
 
   return (
-    <div className='photoInformation'>
+    <div className='photoInformation' style={{'display': 'none'}}>
       <h1>{language.credit} <span id='credit'>{props.info.credit}</span></h1>
       <Info className='photoInformationHover'/>
       <div className={props.className || 'infoCard'}>

src/components/widgets/time/Clock.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import Analog from 'react-clock';
-
 import './clock.scss';
 
+const Analog = React.lazy(() => import('react-clock'));
+const renderLoader = () => <></>;
+
 export default class Clock extends React.PureComponent {
   constructor() {
     super();
@@ -97,7 +98,8 @@ export default class Clock extends React.PureComponent {
 
     if (localStorage.getItem('timeType') === 'analogue') {
       clockHTML = (
-        <Analog 
+        <React.Suspense fallback={renderLoader()}>
+          <Analog 
           className='analogclock' 
           value={this.state.time} 
           renderHourMarks={enabled('hourMarks')} 
@@ -106,6 +108,7 @@ export default class Clock extends React.PureComponent {
           renderMinuteHand={enabled('minuteHand')} 
           renderHourHand={enabled('hourHand')} 
         />
+        </React.Suspense>
       );
     }