Resolve "Merge request spinner spins forever after loading the diff"

app/assets/javascripts/merge_request_tabs.js

@@ -362,7 +362,7 @@ export default class MergeRequestTabs {
   //
   // status - Boolean, true to show, false to hide
   toggleLoading(status) {
-    $('.mr-loading-status .loading').toggleClass('hidden', status);
+    $('.mr-loading-status .loading').toggleClass('hidden', !status);
   }
 
   diffViewType() {

app/assets/javascripts/pages/users/user_tabs.js

@@ -77,8 +77,7 @@ export default class UserTabs {
     this.action = action || this.defaultAction;
     this.$parentEl = $(parentEl) || $(document);
     this.windowLocation = window.location;
-    this.$parentEl.find('.nav-links a')
-      .each((i, navLink) => {
+    this.$parentEl.find('.nav-links a').each((i, navLink) => {
       this.loaded[$(navLink).attr('data-action')] = false;
     });
     this.actions = Object.keys(this.loaded);
@@ -116,8 +115,7 @@ export default class UserTabs {
   }
 
   activateTab(action) {
-    return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
-      .tab('show');
+    return this.$parentEl.find(`.nav-links .js-${action}-tab a`).tab('show');
   }
 
   setTab(action, endpoint) {
@@ -137,7 +135,8 @@ export default class UserTabs {
   loadTab(action, endpoint) {
     this.toggleLoading(true);
 
-    return axios.get(endpoint)
+    return axios
+      .get(endpoint)
       .then(({ data }) => {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
@@ -161,10 +160,11 @@ export default class UserTabs {
     const utcOffset = $calendarWrap.data('utcOffset');
     let utcFormatted = 'UTC';
     if (utcOffset !== 0) {
-      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`;
+      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${utcOffset / 3600}`;
     }
 
-    axios.get(calendarPath)
+    axios
+      .get(calendarPath)
       .then(({ data }) => {
         $calendarWrap.html(CALENDAR_TEMPLATE);
         $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
@@ -180,17 +180,20 @@ export default class UserTabs {
   }
 
   toggleLoading(status) {
-    return this.$parentEl.find('.loading-status .loading')
-      .toggleClass('hidden', status);
+    return this.$parentEl.find('.loading-status .loading').toggleClass('hidden', !status);
   }
 
   setCurrentAction(source) {
     let newState = source;
     newState = newState.replace(/\/+$/, '');
     newState += this.windowLocation.search + this.windowLocation.hash;
-    history.replaceState({
+    history.replaceState(
+      {
         url: newState,
-    }, document.title, newState);
+      },
+      document.title,
+      newState,
+    );
     return newState;
   }
 

spec/features/projects/merge_requests/user_views_diffs_spec.rb

@@ -26,6 +26,10 @@ describe 'User views diffs', :js do
     expect(page).to have_css('#inline-diff-btn', count: 1)
   end
 
+  it 'hides loading spinner after load' do
+    expect(page).not_to have_selector('.mr-loading-status .loading', visible: true)
+  end
+
   context 'when in the inline view' do
     include_examples 'unfold diffs'
   end

spec/features/users/user_browses_projects_on_user_page_spec.rb

@@ -26,18 +26,23 @@ describe 'Users > User browses projects on user page', :js do
     end
   end
 
+  it 'hides loading spinner after load', :js do
+    visit user_path(user)
+    click_nav_link('Personal projects')
+
+    wait_for_requests
+
+    expect(page).not_to have_selector('.loading-status .loading', visible: true)
+  end
+
   it 'paginates projects', :js do
     project = create(:project, namespace: user.namespace, updated_at: 2.minutes.since)
     project2 = create(:project, namespace: user.namespace, updated_at: 1.minute.since)
     allow(Project).to receive(:default_per_page).and_return(1)
 
     sign_in(user)
-
     visit user_path(user)
-
-    page.within('.user-profile-nav') do
-      click_link('Personal projects')
-    end
+    click_nav_link('Personal projects')
 
     wait_for_requests
 
@@ -92,7 +97,6 @@ describe 'Users > User browses projects on user page', :js do
         click_nav_link('Personal projects')
 
         expect(title).to start_with(user.name)
-
         expect(page).to have_content(private_project.name)
         expect(page).to have_content(public_project.name)
         expect(page).to have_content(internal_project.name)