From 149bcdbe059fd48c81d8f47ed84fee9f11a36393 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Sat, 10 Apr 2021 22:32:46 +0100
Subject: [PATCH] feat: background fade in animation (WIP)

---
 .../modals/main/settings/sections/Search.jsx  |  4 ++--
 .../widgets/background/Background.jsx         | 21 ++++++++++++++-----
 .../widgets/background/scss/index.scss        |  6 +++++-
 src/scss/index.scss                           |  2 +-
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 0ee70244..f1b4ab35 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/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>
       </>
     );
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 624d8bb8..090f9557 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/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);
diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss
index 1b467db5..ed31a558 100644
--- a/src/components/widgets/background/scss/index.scss
+++ b/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) {
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 806936c1..eb2c99bd 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -7,7 +7,7 @@
 @import 'modules/buttons';
 
 body {
-  background: #2f3640;
+  background: #000000;
   margin: 0;
   overflow: hidden;
 }