perf: further improve performance

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} id='searchBar'>
-          {this.state.microphone}
-          <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
-          <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
-        </form>
-      </>
+      <form action={this.state.url} className='searchBar'>
+        {this.state.microphone}
+        <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
+        <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
+      </form>
     );
   }
 }

src/components/widgets/search/search.scss

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