show app upon css load & add splashscreen

index.html

@@ -28,7 +28,6 @@
 		-->
 		<meta http-equiv="X-UA-Compatible" content="chrome=1">
 		<title>Remix - Ethereum IDE</title>
-		<link rel="stylesheet" id="theme-link"/>
 		<link rel="stylesheet" href="assets/css/pygment_trac.css">
 		<link rel="icon" type="x-icon" href="icon.png">
 		<script src="assets/js/browserfs.min.js"></script>

src/app.js

@@ -98,12 +98,38 @@ var css = csjs`
     background-color   : var(--info);
     opacity            : 0.5;
   }
+  .centered {
+    position           : fixed;
+    top                : 50%;
+    left               : 50%;
+    width              : 200px;
+    height             : 200px;
+  }
+  .centered svg path {
+    fill: var(--secondary);
+  }
+  .centered svg polygon {
+    fill: var(--secondary);
+  }
 `
 
 class App {
   constructor (api = {}, events = {}, opts = {}) {
     var self = this
     self._components = {}
+    self._view = {}
+    self._view.splashScreen = yo`<div class=${css.centered}><svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
+    <title>remix_logo1</title>
+    <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
+    <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
+    <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
+    </svg>
+    <div class="info-secondary" style="text-align:center">
+      REMIX IDE
+    </div>
+    </div>`
+    document.body.appendChild(self._view.splashScreen)
+
     // setup storage
     var configStorage = new Storage('config-v0.8:')
 
@@ -126,8 +152,6 @@ class App {
     registry.put({api: self._components.filesProviders['localhost'], name: 'fileproviders/localhost'})
     registry.put({api: self._components.filesProviders, name: 'fileproviders'})
 
-    self._view = {}
-
     migrateFileSystem(self._components.filesProviders['browser'])
   }
 
@@ -163,7 +187,7 @@ class App {
     self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
 
     self._view.el = yo`
-      <div class=${css.remixIDE}>
+      <div style="visibility:hidden" class=${css.remixIDE}>
         ${self._view.iconpanel}
         ${self._view.sidepanel}
         ${self._components.resizeFeature.render()}
@@ -215,6 +239,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // ----------------- theme servive ----------------------------
   const themeModule = new ThemeModule(registry)
   registry.put({api: themeModule, name: 'themeModule'})
+  themeModule.initTheme(() => {
+    setTimeout(() => {
+      document.body.removeChild(self._view.splashScreen)
+      self._view.el.style.visibility = 'visible'
+    }, 1500)
+  })
   // ----------------- editor servive ----------------------------
   const editor = new Editor({}, themeModule) // wrapper around ace editor
   registry.put({api: editor, name: 'editor'})

src/app/tabs/theme-module.js

@@ -1,6 +1,7 @@
 import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import * as packageJson from '../../../package.json'
+import yo from 'yo-yo'
 
 const themes = [
   {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1578991867/remix-dark-theme.css'},
@@ -52,6 +53,21 @@ export class ThemeModule extends Plugin {
     return Object.keys(this.themes).map(key => this.themes[key])
   }
 
+  /**
+   * Init the theme
+   */
+  initTheme (callback) {
+    if (this.active) {
+      const nextTheme = this.themes[this.active] // Theme
+      document.documentElement.style.setProperty('--theme', nextTheme.quality)
+      const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+      theme.addEventListener('load', () => {
+        if (callback) callback()
+      })
+      document.head.appendChild(theme)
+    }
+  }
+
   /**
    * Change the current theme
    * @param {string} [themeName] - The name of the theme