Add loaderSpinner

assets/css/browser-solidity.css

@@ -42,20 +42,6 @@ body {
     left: 0;
 }
 
-.loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 #tabs-bar {
     position: absolute;
     overflow: hidden;

index.html

@@ -57,7 +57,7 @@
 				<div id="menu">
 					<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
 					<ul id="options">
-						<li class="envView active" title="Environment">Contract</li>
+						<li class="envView" title="Environment">Contract</li>
 						<li class="publishView" title="Publish" >Files</li>
 						<li class="debugView" title="Debugger">Debugger</li>
 						<li class="staticanalysisView" title="Static Analysis">Analysis</li>

src/app.js

@@ -26,7 +26,8 @@ var EventManager = require('ethereum-remix').lib.EventManager
 var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
 var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 var FilePanel = require('./app/file-panel')
-
+var loadingSpinner = require('./app/loading-spinner')
+var tabbedMenu = require('./app/tabbed-menu')
 var examples = require('./app/example-contracts')
 
 var contractTab = require('./app/contract-tab.js')
@@ -70,6 +71,14 @@ var run = function () {
   var files = new Files(fileStorage)
   var config = new Config(fileStorage)
 
+  var executionContext = new ExecutionContext()
+  var compiler = new Compiler(handleImportCall)
+  var formalVerification = new FormalVerification($('#verificationView'), compiler.event)
+  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
+
+  // load tabbed menu component
+  tabbedMenu(compiler, loadingSpinner, self)
+
   // return all the files, except the temporary/readonly ones
   function packageFiles () {
     var ret = {}
@@ -277,24 +286,7 @@ var run = function () {
     }).appendTo('body')
   })
 
-  // ---------------- tabbed menu ------------------
-  $('#options li').click(function (ev) {
-    var $el = $(this)
-    selectTab($el)
-  })
-
-  var selectTab = function (el) {
-    var match = /[a-z]+View/.exec(el.get(0).className)
-    if (!match) return
-    var cls = match[0]
-    if (!el.hasClass('active')) {
-      el.parent().find('li').removeClass('active')
-      $('#optionViews').attr('class', '').addClass(cls)
-      el.addClass('active')
-    }
-    self.event.trigger('tabChanged', [cls])
-  }
-
+  // --------------------Files tabs-----------------------------
   var $filesEl = $('#files')
   var FILE_SCROLL_DELTA = 300
 
@@ -623,11 +615,6 @@ var run = function () {
     }
   }
 
-  var executionContext = new ExecutionContext()
-  var compiler = new Compiler(handleImportCall)
-  var formalVerification = new FormalVerification($('#verificationView'), compiler.event)
-  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
-
   // ----------------- Debugger -----------------
   var debugAPI = {
     statementMarker: null,

src/app/compiler.js

@@ -77,7 +77,6 @@ function Compiler (handleImportCall) {
 
         compilationFinished(result, missingInputs, source)
       }
-
       onCompilerLoaded(compiler.version())
     }
   }

src/app/loading-spinner.js

+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+
+module.exports = loadingSpinner
+
+var css = csjs`
+  .loader {
+    display: inline-block;
+    margin-left: .3em;
+    border: 2px solid #C6CFD9; /* Light grey */
+    border-top: 2px solid #F4F6FF; /* Light blue */
+    border-radius: 50%;
+    width: 8px;
+    height: 8px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+  }
+`
+function loadingSpinner (cb) {
+  var el = yo`<div class=${css.loader}></div>`
+  if (cb) {
+    cb(function finish () {
+      var p = el.parentElement
+      if (p) p.removeChild(el)
+    })
+  }
+  return el
+}

src/app/tabbed-menu.js

+var $ = require('jquery')
+
+module.exports = tabbedMenu
+
+function tabbedMenu (compiler, loadingSpinner, self) {
+  $('#options li').click(function (ev) {
+    var $el = $(this)
+    selectTab($el)
+  })
+
+  // initialize tabbed menu
+  selectTab($('#options .envView'))
+
+  // add event listeners for loading spinner
+  // compiler.event.register('compilationStarted', function compilationStarted () {
+  compiler.event.register('loadingCompiler', function compilationStarted () {
+    var contractTab = document.querySelector('.envView')
+    if (!contractTab.children.length) {
+      contractTab.appendChild(loadingSpinner(function cb (finish) {
+        // compiler.event.register('compilationFinished', function () {
+        compiler.event.register('compilerLoaded', finish)
+      }))
+    }
+  })
+  compiler.event.register('loadingCompiler', function loadingCompiler () {
+    var settingsTab = document.querySelector('.settingsView')
+    if (!settingsTab.children.length) {
+      settingsTab.appendChild(loadingSpinner(function cb (finish) {
+        compiler.event.register('compilerLoaded', finish)
+      }))
+    }
+  })
+
+  // select tab
+  function selectTab (el) {
+    var match = /[a-z]+View/.exec(el.get(0).className)
+    if (!match) return
+    var cls = match[0]
+    if (!el.hasClass('active')) {
+      el.get(0).parentElement.querySelectorAll('li').forEach(function (li) {
+        li.classList.remove('active')
+      })
+      $('#optionViews').attr('class', '').addClass(cls)
+      el.addClass('active')
+    }
+    self.event.trigger('tabChanged', [cls])
+  }
+}