perf: further improve performance

src/components/modals/main/Main.jsx

@@ -4,27 +4,21 @@ import Settings from './tabs/Settings';
 import Addons from './tabs/Addons';
 import Marketplace from './tabs/Marketplace';
 
-import Navigation from './tabs/backend/Tabs';
+import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
 
 export default function MainModal(props) {
-  const language = window.language;
+  const language = window.language.modals.main.navbar;
 
   return (
     <>
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
-      <Navigation navbar={true}>
+      <Tabs navbar={true}>
-        <div label={language.modals.main.navbar.settings}>
+        <div label={language.settings}><Settings/></div>
-          <Settings/>
+        <div label={language.addons}><Addons/></div>
-        </div>
+        <div label={language.marketplace}><Marketplace/></div>
-        <div label={language.modals.main.navbar.addons}>
+      </Tabs>
-          <Addons/>
-        </div>
-        <div label={language.modals.main.navbar.marketplace}>
-          <Marketplace/>
-        </div>
-      </Navigation>
     </>
   );
 }

src/components/modals/main/settings/Checkbox.jsx

@@ -25,9 +25,9 @@ export default class Checkbox extends React.PureComponent {
     let text = this.props.text;
 
     if (this.props.newFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
     } else if (this.props.betaFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
     }
 
     return (

src/components/modals/main/settings/Switch.jsx

@@ -25,9 +25,9 @@ export default class Switch extends React.PureComponent {
     let text = this.props.text;
 
     if (this.props.newFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
     } else if (this.props.betaFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
     }
 
     return (

src/components/modals/main/settings/sections/Background.jsx

@@ -176,7 +176,7 @@ export default class BackgroundSettings extends React.PureComponent {
             onChange={(color) => this.onColorPickerChange(color, 'change')}
             onEndChange={(color) => this.onColorPickerChange(color, 'end')}
             gradient={this.GradientPickerInitalState}
-            isGradient />
+            isGradient/>
         );
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
@@ -190,12 +190,12 @@ export default class BackgroundSettings extends React.PureComponent {
       }
 
       colourSettings = (
-        <div>
+        <>
           {gradientInputs}
           {this.state.gradientSettings.gradient[0].colour !== background.source.disabled &&
            !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button>) : null
           }
-        </div>
+        </>
       );
     }
 

src/components/modals/main/tabs/Addons.jsx

@@ -6,15 +6,9 @@ import AddonsTabs from './backend/Tabs';
 
 export default function Addons() {
   return (
-    <>
+    <AddonsTabs>
-      <AddonsTabs>
+      <div label='Added'><Added/></div>
-        <div label='Added'>
+      <div label=''></div>
-          <Added/>
+    </AddonsTabs>
-        </div>
-        <div label=''>
-
-        </div>
-      </AddonsTabs>
-    </>
   );
 }

src/components/modals/main/tabs/Marketplace.jsx

@@ -1,19 +1,14 @@
 import React from 'react';
 
-import MarketplaceBackend from '../marketplace/sections/Marketplace';
+import MarketplaceTab from '../marketplace/sections/Marketplace';
-import MarketplaceTabs from './backend/Tabs';
+
+import Tabs from './backend/Tabs';
 
 export default function Marketplace() {
   return (
-    <>
+    <Tabs>
-      <MarketplaceTabs>
+      <div label='Photo Packs'><MarketplaceTab type='photo_packs'/></div>
-        <div label='Photo Packs'>
+      <div label='Quote Packs'><MarketplaceTab type='quote_packs'/></div>
-          <MarketplaceBackend type='photo_packs'/>
+    </Tabs>
-        </div>
-        <div label='Quote Packs'>
-          <MarketplaceBackend type='quote_packs'/>
-        </div>
-      </MarketplaceTabs>
-    </>
   );
 }

src/components/modals/main/tabs/Settings.jsx

@@ -12,13 +12,13 @@ import Advanced from '../settings/sections/Advanced';
 import Changelog from '../settings/sections/Changelog';
 import Order from '../settings/sections/Order';
 
-import SettingsTabs from './backend/Tabs';
+import Tabs from './backend/Tabs';
 
 export default function Settings() {
   const language = window.language.modals.main.settings.sections;
   return (
     <>
-      <SettingsTabs>
+      <Tabs>
         <div label={language.time.title}><Time/></div>
         <div label={language.quote.title}><Quote/></div>
         <div label={language.greeting.title}><Greeting/></div>
@@ -31,7 +31,7 @@ export default function Settings() {
         <div label='Experimental'></div>
         <div label={language.changelog}><Changelog/></div>
         <div label={language.about.title}><About/></div>
-      </SettingsTabs>
+      </Tabs>
       <div className='reminder-info'>
         <h1>IMPORTANT INFO</h1>
         <p>In order for changes to take place, the page must be refreshed.</p>

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -32,7 +32,7 @@ export default class Tabs extends React.PureComponent {
     return (
       <span className='tabs'>
         <ul className={className}>
-         {optionsText}
+          {optionsText}
           {this.props.children.map((tab) => {
             return (
               <Tab
@@ -47,10 +47,10 @@ export default class Tabs extends React.PureComponent {
         </ul>
         <div className={tabClass}>
           <ErrorBoundary>
-          {this.props.children.map((child) => {
+            {this.props.children.map((child) => {
-            if (child.props.label !== this.state.currentTab) return undefined;
+              if (child.props.label !== this.state.currentTab) return undefined;
-            return child.props.children;
+              return child.props.children;
-          })}
+            })}
           </ErrorBoundary>
         </div>
       </span>

src/components/widgets/Widgets.jsx

@@ -74,7 +74,7 @@ export default class Widgets extends React.PureComponent {
 
     if (order) {
       order.forEach(element => {
-        elements.push(this.widgets[element]);
+        elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
       });
     } else {
       elements = ['greeting', 'time', 'quote', 'date'];

src/components/widgets/background/Background.jsx

@@ -199,7 +199,8 @@ export default class Background extends React.PureComponent {
     return (
       <React.Fragment>
         <div id='backgroundImage'/>
-        <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
+        {(this.state.photoInfo.credit !== '') ? <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
+        : null}
       </React.Fragment>
     );
   }

src/components/widgets/background/Favourite.jsx

@@ -7,7 +7,7 @@ export default class Favourite extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      favourited: <StarIcon2 onClick={() => this.favourite()} />
+      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} /> : <StarIcon2 onClick={() => this.favourite()} />
     };
   }
 
@@ -30,14 +30,6 @@ export default class Favourite extends React.PureComponent {
     }
   }
 
-  componentDidMount() {
-    if (localStorage.getItem('favourite')) {
-      this.setState({
-        favourited: <StarIcon onClick={() => this.favourite()} />
-      });
-    }
-  }
-
   render() {
     if (localStorage.getItem('favouriteEnabled') === 'false' || localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
       return null;

src/components/widgets/background/Maximise.jsx

@@ -19,7 +19,7 @@ export default class View extends React.PureComponent {
 
   viewStuff() {
     // elements to hide
-    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
+    const elements = ['.searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
 
     elements.forEach((element) => {
       try {

src/components/widgets/navbar/Navbar.jsx

@@ -10,7 +10,7 @@ import './scss/index.scss';
 
 // the user probably won't use the notes feature every time so we lazy load
 const Notes = React.lazy(() => import('./Notes'));
-const renderLoader = () => <div></div>;
+const renderLoader = () => <></>;
 
 export default function Navbar(props) {
   const language = window.language;

src/components/widgets/search/Search.jsx

@@ -70,13 +70,11 @@ export default class Search extends React.PureComponent {
 
   render() {
     return (
-      <>
+      <form action={this.state.url} className='searchBar'>
-        <form action={this.state.url} id='searchBar'>
+        {this.state.microphone}
-          {this.state.microphone}
+        <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
-          <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
+        <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
-          <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
+      </form>
-        </form>
-      </>
     );
   }
 }

src/components/widgets/search/search.scss

@@ -1,6 +1,6 @@
 @import '../../../scss/variables';
 
-#searchBar {
+.searchBar {
   position: absolute;
   left: 20px;
   top: 20px;