From a860e10847964099039eb21458e16bf015846575 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sun, 13 May 2018 22:32:22 +0300
Subject: [PATCH] #22: use opaque loader background on first show

---
 src/components/ui/loader/loader.html | 2 +-
 src/components/ui/loader/loader.scss | 7 +++++++
 src/services/loader.js               | 7 ++++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/loader/loader.html b/src/components/ui/loader/loader.html
index 3728412..385fe16 100644
--- a/src/components/ui/loader/loader.html
+++ b/src/components/ui/loader/loader.html
@@ -1,4 +1,4 @@
-<div id="loader" class="loader-overlay">
+<div id="loader" class="loader-overlay is-first-launch">
     <div class="loader">
         <div class="loader__cube loader__cube--1"></div>
         <div class="loader__cube loader__cube--2"></div>
diff --git a/src/components/ui/loader/loader.scss b/src/components/ui/loader/loader.scss
index 6d33281..a5f8561 100644
--- a/src/components/ui/loader/loader.scss
+++ b/src/components/ui/loader/loader.scss
@@ -12,12 +12,19 @@
 
     transition: 0.4s ease;
 
+    &.is-first-launch {
+        // if loader is shown for the first time, we will
+        // remove opacity and hide the entire site contents
+        background: #f2efeb;
+    }
+
     &.is-active {
         opacity: 1;
         visibility: visible;
     }
 }
 
+
 .loader {
     position: absolute;
     top: 50%;
diff --git a/src/services/loader.js b/src/services/loader.js
index 5209698..8b90e36 100644
--- a/src/services/loader.js
+++ b/src/services/loader.js
@@ -3,14 +3,15 @@ let stack = 1;
 
 export default {
     show() {
-        if (++stack !== 1) {
+        if (++stack >= 0) {
             document.getElementById('loader').classList.add('is-active');
         }
     },
 
     hide() {
-        if (--stack === 0) {
-            document.getElementById('loader').classList.remove('is-active');
+        if (--stack <= 0) {
+            stack = 0;
+            document.getElementById('loader').classList.remove('is-active', 'is-first-launch');
         }
     }
 };