load gitter iframe only when support tab is loaded

src/app/panels/righthand-panel.js

@@ -51,7 +51,7 @@ function RighthandPanel (appAPI, events, opts) {
   this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events))
   this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews))
   this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews))
-  this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews))
+  this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, events))
   this._view.tabbedMenu.selectTabByTitle('Compile')
 
   self.pluginManager = new PluginManager(appAPI, events)

src/app/tabs/support-tab.js

@@ -11,8 +11,12 @@ var infoText = yo`
   </div>
 `
 
-function supportTab (container) {
-  var el = yo`
+let gitterIframe = yo`
+  <iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>
+`
+
+function supportTabView (gitterIframe) {
+  return yo`
     <div class="${css.supportTabView} "id="supportView">
       <div>
         <div class="${css.infoBox}">
@@ -23,10 +27,26 @@ function supportTab (container) {
         <div class="${css.chatTitle}" onclick=${openLink} title='Click to open chat in Gitter'>
           <div class="${css.chatTitleText}">ethereum/remix community chat</div>
         </div>
-        <iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>
+        ${gitterIframe}
       </div>
     </div>
   `
+}
+
+function supportTab (container, events) {
+  let el = supportTabView('hello')
+  let gitterIsLoaded = false
+
+  events.app.register('tabChanged', (tabName) => {
+    if (tabName !== 'Support' || gitterIsLoaded) {
+      return
+    }
+
+    yo.update(el, supportTabView(gitterIframe))
+    el.style.display = 'block'
+    gitterIsLoaded = true
+  })
+
   container.appendChild(el)
   return el
 }