[design] add page load fade in

gulpfile.js

@@ -75,6 +75,7 @@ const cssFiles = [
 const jsFiles = [
   path.src + '/js/helper.js',
   path.src + '/js/data.js',
+  path.src + '/js/ready.js',
   path.src + '/js/fontawesome.js',
   path.src + '/js/update.js',
   path.src + '/js/state.js',

src/css/background.css

@@ -6,7 +6,6 @@
   height: 100vh;
   pointer-events: none;
   z-index: var(--z-index-background);
-  animation: appear var(--layout-timing-medium) 1;
   display: none;
 }
 

src/css/base.css

@@ -20,6 +20,12 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  opacity: 0;
+  transition: opacity var(--layout-timing-fast);
+}
+
+.is-ready body {
+  opacity: 1;
 }
 
 html.is-background-color-by-theme,

src/html/script-js.html

@@ -7,6 +7,7 @@
 <!-- nightTab -->
 <script src="js/helper.js"></script>
 <script src="js/data.js"></script>
+<script src="js/ready.js"></script>
 <script src="js/fontawesome.js"></script>
 <script src="js/update.js"></script>
 <script src="js/state.js"></script>

src/js/init.js

@@ -1,5 +1,6 @@
 // log version
 console.log("nightTab version", version.get().number, version.get().name);
+ready.init();
 data.init();
 state.init();
 header.init();

src/js/ready.js

@@ -0,0 +1,36 @@
+var ready = (function() {
+
+  var bind = {};
+
+  bind.loaded = {
+    func: function() {
+      render.loaded();
+      bind.loaded.remove();
+    },
+    add: function() {
+      window.addEventListener("load", bind.loaded.func, false);
+    },
+    remove: function() {
+      window.removeEventListener("load", bind.loaded.func);
+    }
+  };
+
+  var render = {};
+
+  render.loaded = function() {
+    var html = helper.e("html");
+    helper.addClass(html, "is-ready");
+  };
+
+  var init = function() {
+    bind.loaded.add();
+  };
+
+  // exposed methods
+  return {
+    init: init,
+    bind: bind,
+    render: render
+  };
+
+})();