feat: background fade in animation (WIP)

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

@@ -79,9 +79,9 @@ export default class SearchSettings extends React.PureComponent {
         </Dropdown>
 
         <br/><br/>
-        <ul id='searchEngineInput' style={{ display: this.state.customDisplay }}>
+        <ul style={{ display: this.state.customDisplay }}>
           <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
-          <input type='text' id='customSearchEngine' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
+          <input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
         </ul>
       </>
     );

src/components/widgets/background/Background.jsx

@@ -68,10 +68,21 @@ export default class Background extends React.PureComponent {
     if (this.state.url !== '') {
       const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
 
-      document.querySelector('#backgroundImage').setAttribute(
-        'style',
-        `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
-      );
+      const backgroundImage = document.querySelector('#backgroundImage');
+      backgroundImage.classList.add('backgroundPreload');
+
+      let preloader = document.createElement('img');
+      preloader.src = url;
+      preloader.addEventListener('load', () => {
+        backgroundImage.classList.remove('backgroundPreload');
+        backgroundImage.classList.add('fade-in');
+
+        backgroundImage.setAttribute(
+          'style',
+          `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+        ); 
+        preloader = null;
+      });
     } else {
       document.querySelector('#backgroundImage').setAttribute(
         'style',
@@ -136,7 +147,7 @@ export default class Background extends React.PureComponent {
 
       case 'colour':
         // background colour
-        const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {"angle":"180","gradient":[{"colour":"#ffb032","stop":0}],"type":"linear"};
+        const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
         let gradientSettings = '';
         try {
           gradientSettings = JSON.parse(customBackgroundColour);

src/components/widgets/background/scss/index.scss

@@ -10,6 +10,10 @@
   zoom: 100% !important;
 }
 
+.backgroundPreload {
+  opacity: 0;
+}
+
 #backgroundVideo {
   position: fixed;
   right: 0;
@@ -19,7 +23,7 @@
 }
 
 .fade-in {
-  @include animation('fadein 2s');
+  @include animation('fadein 1s');
 }
 
 @include keyframes(fadein) {

src/scss/index.scss

@@ -7,7 +7,7 @@
 @import 'modules/buttons';
 
 body {
-  background: #2f3640;
+  background: #000000;
   margin: 0;
   overflow: hidden;
 }