Make editor display immediately, and with a white background

cms/static/coffee/src/views/module_edit.coffee

@@ -14,10 +14,13 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   $component_editor: => @$el.find('.component-editor')
 
-  loadModules: ->
-      @module = XModule.loadModule(@$el.find('.xmodule_edit'))
+  loadDisplay: ->
       XModule.loadModule(@$el.find('.xmodule_display'))
 
+  loadEdit: ->
+    if !@module
+      @module = XModule.loadModule(@$el.find('.xmodule_edit'))
+
   metadata: ->
     # cdodge: package up metadata which is separated into a number of input fields
     # there's probably a better way to do this, but at least this lets me continue to move onwards
@@ -45,7 +48,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
   render: ->
     if @model.id
       @$el.load("/preview_component/#{@model.id}", =>
-        @loadModules()
+        @loadDisplay()
         @delegateEvents()
       )
 
@@ -71,3 +74,4 @@ class CMS.Views.ModuleEdit extends Backbone.View
     event.preventDefault()
     @$el.addClass('editing')
     @$component_editor().slideDown(150)
+    @loadEdit()

cms/static/sass/_unit.scss

@@ -228,6 +228,10 @@
         border-radius: 0 0 3px 3px;
         background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
 
+        .module-editor {
+            background: white;
+        }
+
         h5 {
             margin-bottom: 8px;
             color: #fff;

cms/templates/component.html

@@ -5,7 +5,9 @@ ${preview}
 </div>
 <a href="#" class="drag-handle wip"></a>
 <div class="component-editor">
-  ${editor}
+  <div class="module-editor">
+    ${editor}
+  </div>
   <a href="#" class="save-button">Save</a>
   <a href="#" class="cancel-button">Cancel</a>
 </div>