add a 'css mutex' for cuke failures

app/assets/javascripts/app/pages/profile.js

@@ -27,6 +27,7 @@ app.pages.Profile = app.views.Base.extend({
     this.streamViewClass = _.has(opts, 'streamView') ? opts.streamView : null;
 
     this.model.on('change', this.render, this);
+    this.model.on('sync', this._done, this);
 
     // bind to global events
     var id = this.model.get('id');
@@ -114,6 +115,14 @@ app.pages.Profile = app.views.Base.extend({
   },
 
   reload: function() {
-    this.model.fetch();
+    this.$('#profile').addClass('loading');
+
+    this.asyncSubHeader = $.Deferred();
+    $.when(this.model.fetch(), this.asyncSubHeader)
+      .done(_.bind(this._done, this));
+  },
+
+  _done: function() {
+    this.$('#profile').removeClass('loading');
   }
 });

app/assets/javascripts/app/views/profile_header_view.js

@@ -20,7 +20,10 @@ app.views.ProfileHeader = app.views.Base.extend({
   postRenderTemplate: function() {
     var self = this;
     var dropdownEl = this.$('.aspect_membership_dropdown.placeholder');
-    if( dropdownEl.length == 0 ) return;
+    if( dropdownEl.length == 0 ) {
+      this._done();
+      return;
+    }
 
     // TODO render me client side!!!
     var href = this.model.url() + '/aspect_membership_button?create=true';
@@ -32,6 +35,11 @@ app.views.ProfileHeader = app.views.Base.extend({
 
       // UGLY (re-)attach the facebox
       self.$('a[rel*=facebox]').facebox();
+      this._done();
     });
+  },
+
+  _done: function() {
+    app.page.asyncSubHeader && app.page.asyncSubHeader.resovle();
   }
 });

features/step_definitions/aspects_steps.rb

@@ -10,6 +10,19 @@ module AspectCukeHelpers
     find(aspect_css).click
   end
 
+  def toggle_aspect_via_ui(aspect_name)
+    aspects_dropdown = find(".aspect_membership .toggle.button", match: :first)
+    aspects_dropdown.click
+    aspect = find(".dropdown.active .dropdown_list li", text: aspect_name)
+    aspect.click
+    aspect.parent.should have_no_css(".loading")
+
+    # close dropdown
+    page.should have_no_css('#profile.loading')
+    aspects_dropdown.click if aspects_dropdown.has_xpath?("..[contains(@class, 'active')]", wait: 3)
+    aspects_dropdown.should have_no_xpath("..[contains(@class, 'active')]")
+  end
+
   def aspect_dropdown_visible?
     expect(find('.aspect_membership.dropdown.active')).to be_visible
   end

features/step_definitions/user_steps.rb

@@ -119,13 +119,7 @@ Then /^I should have (\d) contacts? in "([^"]*)"$/ do |n_contacts, aspect_name|
 end
 
 When /^I (?:add|remove) the person (?:to|from) my "([^\"]*)" aspect$/ do |aspect_name|
-    aspects_dropdown = find(".aspect_membership .toggle.button", match: :first)
-    aspects_dropdown.click
-    aspect = find(".dropdown.active .dropdown_list li", text: aspect_name)
-    aspect.click
-    aspect.parent.has_css?(".loading")
-    aspect.parent.should_not have_css(".loading")
-    aspects_dropdown.click
+  toggle_aspect_via_ui(aspect_name)
 end
 
 When /^I post a status with the text "([^\"]*)"$/ do |text|

features/support/publishing_cuke_helpers.rb

@@ -15,6 +15,7 @@ module PublishingCukeHelpers
     page.execute_script(%q{$("input[name='file']").css("opacity", '1');})
     with_scope("#publisher_textarea_wrapper") do
       attach_file("file", Rails.root.join(path).to_s)
+      # wait for the image to be ready
       page.assert_selector(".publisher_photo.loading", count: 0)
     end
   end
@@ -27,6 +28,7 @@ module PublishingCukeHelpers
   def submit_publisher
     txt = find('#publisher #status_message_fake_text').value
     find('#publisher .creation').click
+    # wait for the content to appear
     expect(page).to have_content(txt) unless page.has_css?('.nsfw-shield')
   end