Finished up work on the wizard settings modal.

app/styles/account/settings.sass

@@ -37,44 +37,4 @@
     font-size: 12px
     
   .form
-    max-width: 600px
-    
-#wizard-settings-view
-  #color-settings
-    float: left
-    width: 600px
-    margin-left: 30px
-    
-  canvas
-    float: left
-    border: 2px solid black
-    margin: 20px
-    
-  .color-group
-    clear: both
-    padding-bottom: 10px
-    margin-bottom: 10px
-    border-bottom: 1px solid gray
-
-  .name-cell
-    float: left
-    width: 100px
-    padding-top: 2px
-    
-    input
-      margin-right: 10px
-      position: relative
-      top: -3px
-    
-  .checkbox-cell
-    float: left
-    width: 40px
-    
-  .slider-cell
-    margin-bottom: 10px
-    float: left
-    width: 120px
-
-  .selector
-    width: 100px
-    
+    max-width: 600px

app/styles/account/wizard-settings.sass

@@ -0,0 +1,42 @@
+#wizard-settings-view
+  h3#loading
+    text-align: center
+  
+  #color-settings
+    float: left
+      width: 600px
+      margin-left: 30px
+
+    canvas
+      float: left
+      border: 2px solid black
+      margin: 20px
+
+    .color-group
+      clear: both
+      padding-bottom: 10px
+      margin-bottom: 10px
+      border-bottom: 1px solid gray
+
+    .name-cell
+      float: left
+      width: 100px
+      padding-top: 2px
+
+      input
+        margin-right: 10px
+        position: relative
+        top: -3px
+
+    .checkbox-cell
+      float: left
+      width: 40px
+
+    .slider-cell
+      margin-bottom: 10px
+      float: left
+      width: 120px
+
+    .selector
+      width: 100px
+    

app/templates/modal/wizard_settings.jade

@@ -11,5 +11,10 @@ block modal-body-content
 
   #wizard-settings-view
 
+block modal-body-wait-content
+  h3 Saving...
+.progress.progress-striped.active
+  .progress-bar
+
 block modal-footer-content
   button.btn.btn-primary.btn-large#wizard-settings-done(type="button") Done

app/views/account/wizard_settings_view.coffee

@@ -1,12 +1,13 @@
-RootView = require 'views/kinds/RootView'
+CocoView = require 'views/kinds/CocoView'
 template = require 'templates/account/wizard_settings'
 {me} = require('lib/auth')
 ThangType = require 'models/ThangType'
 SpriteBuilder = require 'lib/sprites/SpriteBuilder'
 
-module.exports = class WizardSettingsView extends RootView
+module.exports = class WizardSettingsView extends CocoView
   id: 'wizard-settings-view'
   template: template
+  startsLoading: true
 
   events:
     'change .color-group-checkbox': (e) ->
@@ -25,6 +26,7 @@ module.exports = class WizardSettingsView extends RootView
     @wizardThangType.once 'sync', @initCanvas, @
 
   initCanvas: ->
+    @startsLoading = false
     @render()
     @spriteBuilder = new SpriteBuilder(@wizardThangType)
     @initStage()
@@ -44,6 +46,7 @@ module.exports = class WizardSettingsView extends RootView
     c
 
   afterRender: ->
+    return if @startsLoading
     wizardSettings = me.get('wizard') or {}
     wizardSettings.colorConfig ?= {}
 

app/views/kinds/CocoView.coffee

@@ -129,7 +129,7 @@ module.exports = class CocoView extends Backbone.View
   # Loading RootViews
 
   showLoading: ($el=@$el) ->
-    $el.find('>').hide()
+    $el.find('>').addClass('hidden')
     $el.append($('<div class="loading-screen"></div>')
     .append('<h2>Loading</h2>')
     .append('<div class="progress progress-striped active loading"><div class="progress-bar"></div></div>'))
@@ -138,7 +138,7 @@ module.exports = class CocoView extends Backbone.View
   hideLoading: ->
     return unless @_lastLoading?
     @_lastLoading.find('.loading-screen').remove()
-    @_lastLoading.find('>').show()
+    @_lastLoading.find('>').removeClass('hidden')
     @_lastLoading = null
 
   # Loading ModalViews

app/views/kinds/RootView.coffee

@@ -26,8 +26,8 @@ module.exports = class RootView extends CocoView
     logoutUser($('#login-email').val())
 
   showWizardSettingsModal: ->
-    WizardSettingsView = require('views/modal/wizard_settings_modal')
-    subview = new WizardSettingsView {}
+    WizardSettingsModal = require('views/modal/wizard_settings_modal')
+    subview = new WizardSettingsModal {}
     @openModalView subview
 
   showLoading: ($el) ->

app/views/modal/wizard_settings_modal.coffee

@@ -5,7 +5,7 @@ ThangType = require 'models/ThangType'
 {me} = require 'lib/auth'
 forms = require('lib/forms')
 
-module.exports = class WizardSettingsView extends View
+module.exports = class WizardSettingsModal extends View
   id: "wizard-settings-modal"
   template: template
   closesOnClickOutside: false
@@ -23,7 +23,6 @@ module.exports = class WizardSettingsView extends View
     me.set('name', $('#wizard-settings-name').val())
 
   onWizardSettingsDone: ->
-    console.log 'saving changes'
     forms.clearFormAlerts(@$el)
     res = me.validate()
     if res?
@@ -37,12 +36,10 @@ module.exports = class WizardSettingsView extends View
 
     res.error =>
       errors = JSON.parse(res.responseText)
-      console.log 'resulting error!', errors
       forms.applyErrorsToForm(@$el, errors)
       @disableModalInProgress(@$el)
-    res.success (model, response, options) ->
-      console.log 'resulting success!'
-#      @hide()
+    res.success (model, response, options) =>
+      @hide()
 
     @enableModalInProgress(@$el)
     me.save()