🎉

7 years ago · 351ca25b3f
3 changed files with 53 additions and 35 deletions
--- a/src/index.ejs
+++ b/src/index.ejs
@ -24,9 +24,32 @@
        z-index: 100;
      }

-      #preload video {
-        height: 144px;
-        width: 256px;
+      #preload .logo {
+        height: 100px;
+        width: 100px;
+        animation: logo 4s infinite 1s;
+        transform-origin: 50% 50%;
+      }
+
+      @keyframes logo {
+        from, to {
+          transform: rotate(0deg);
+        }
+        10% {
+          transform: rotate(0deg);
+        }
+        30% {
+          transform: rotate(360deg);
+        }
+        40% {
+          transform: rotate(360deg);
+        }
+        60% {
+          transform: rotate(720deg);
+        }
+        70% {
+          transform: rotate(720deg);
+        }
      }

    </style>
@ -41,45 +64,40 @@
  </head>
  <body>
    <div id="preload">
-      <video autoplay loop muted src="<%= __DEV__ ? '.' : '../static' %>/videos/loader.mp4" />
+      <img class="logo" src="<%= __DEV__ ? '.' : '../static' %>/images/tmp_logo_will_be_svg_later.png" alt="" />
    </div>
    <div id="app"></div>
    <script>
-      const { remote } = require('electron')
-      const { name } = remote.getCurrentWindow()
+    const { remote } = require('electron')
+const { name } = remote.getCurrentWindow()

-      const preloadEl = document.getElementById('preload')
-      const appEl = document.getElementById('app')
+const preloadEl = document.getElementById('preload')
+const appEl = document.getElementById('app')

-      const initApp = (options = {}) => {
-        const { force = false } = options
+const initApp = (options = {}) => {
+  return
+  const { force = false } = options

-        if (force) {
-          preloadEl.remove()
-        } else {
-          preloadEl.style.opacity = 0
+  if (force) {
+    preloadEl.remove()
+  } else {
+    preloadEl.style.opacity = 0

-          preloadEl.addEventListener('transitionend', () => preloadEl.remove())
-        }
-      }
-
-      if (name === 'MainWindow') {
-        preloadEl.style.display = 'flex'
-
-        let waitTime = 0
-
-        const PRELOAD_WAIT_TIME_MIN = 2e3
-        const interval = setInterval(() => (waitTime += 250), 250)
+    preloadEl.addEventListener('transitionend', () => preloadEl.remove())
+  }
+}

-        window.onAppReady = () => {
-          const delay = PRELOAD_WAIT_TIME_MIN - waitTime
-
-          clearInterval(interval)
-          setTimeout(initApp, delay > 0 ? delay : 1)
-        }
-      } else {
-        initApp({ force: true })
-      }
-    </script>
+if (name === 'MainWindow') {
+  preloadEl.style.display = 'flex'
+  const startTime = Date.now()
+  const PRELOAD_WAIT_TIME_MIN = 2000
+  window.onAppReady = () => {
+    const delay = Math.max(0, PRELOAD_WAIT_TIME_MIN - (Date.now() - startTime))
+    setTimeout(initApp, delay)
+  }
+} else {
+  initApp({ force: true })
+}
+</script>
  </body>
 </html>
--- a/static/images/tmp_logo_will_be_svg_later.png
+++ b/static/images/tmp_logo_will_be_svg_later.png
--- a/static/videos/loader.mp4
+++ b/static/videos/loader.mp4