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

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