Change the hash when changing tab

This allows the tab to be loaded by default when the page loads & the hash is present

app/assets/javascripts/milestone.js

@@ -21,7 +21,7 @@
 
     Milestone.sortIssues = function(data) {
       var sort_issues_url;
-      sort_issues_url = location.href + "/sort_issues";
+      sort_issues_url = location.pathname + "/sort_issues";
       return $.ajax({
         type: "PUT",
         url: sort_issues_url,
@@ -38,7 +38,7 @@
 
     Milestone.sortMergeRequests = function(data) {
       var sort_mr_url;
-      sort_mr_url = location.href + "/sort_merge_requests";
+      sort_mr_url = location.pathname + "/sort_merge_requests";
       return $.ajax({
         type: "PUT",
         url: sort_mr_url,
@@ -83,6 +83,12 @@
     function Milestone() {
       this.bindIssuesSorting();
       this.bindTabsSwitching();
+
+      this.loadInitialTab();
+
+      // Load merge request tab if it is active
+      // merge request tab is active based on different conditions in the backend
+      this.loadTab($('.js-milestone-tabs .active a'));
     }
 
     Milestone.prototype.bindIssuesSorting = function() {
@@ -100,12 +106,9 @@
     Milestone.prototype.bindTabsSwitching = function() {
       return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
         const $target = $(e.target);
-        const endpoint = $target.data('endpoint');
 
-        if (endpoint && !$target.hasClass('is-loaded')) {
-          this.loadMergeRequests($target.attr('href'), endpoint)
-            .done(() => $target.addClass('is-loaded'));
-        }
+        location.hash = $target.attr('href');
+        this.loadTab($target);
       });
     };
 
@@ -168,16 +171,33 @@
       });
     };
 
-    Milestone.prototype.loadMergeRequests = function(elId, url) {
-      return $.ajax({
-        url,
-        dataType: 'JSON',
-      })
-      .fail(() => new Flash('Error loading merge requests'))
-      .done((data) => {
-        $(elId).html(data.html);
-        this.bindMergeRequestSorting();
-      });
+    Milestone.prototype.loadInitialTab = function() {
+      const $target = $(`.js-milestone-tabs a[href="${location.hash}"]`);
+
+      if ($target.length) {
+        $target.tab('show');
+      }
+    };
+
+    Milestone.prototype.loadTab = function($target) {
+      const endpoint = $target.data('endpoint');
+      const tabElId = $target.attr('href');
+
+      if (endpoint && !$target.hasClass('is-loaded')) {
+        $.ajax({
+          url: endpoint,
+          dataType: 'JSON',
+        })
+        .fail(() => new Flash('Error loading milestone tab'))
+        .done((data) => {
+          $(tabElId).html(data.html);
+          $target.addClass('is-loaded');
+
+          if (tabElId === '#tab-merge-requests') {
+            this.bindMergeRequestSorting();
+          }
+        });
+      }
     };
 
     return Milestone;

app/helpers/milestones_helper.rb

@@ -116,7 +116,7 @@ module MilestonesHelper
     end
   end
 
-  def milestone_merge_request_path(milestone)
+  def milestone_merge_request_tab_path(milestone)
     if @project
       merge_requests_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
     elsif @group
@@ -124,7 +124,7 @@ module MilestonesHelper
     end
   end
 
-  def milestone_participants_path(milestone)
+  def milestone_participants_tab_path(milestone)
     if @project
       participants_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
     elsif @group
@@ -132,7 +132,7 @@ module MilestonesHelper
     end
   end
 
-  def milestone_labels_path(milestone)
+  def milestone_labels_tab_path(milestone)
     if @project
       labels_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
     elsif @group

app/views/shared/milestones/_tab_loading.html.haml

+.text-center.prepend-top-default
+  = icon('spin spinner 2x', 'aria-hidden': 'true', 'aria-label': 'Loading tab content')

app/views/shared/milestones/_tabs.html.haml

 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs
+  %ul.nav-links.scrolling-tabs.js-milestone-tabs
     - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
       %li.active
         = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
           Issues
           %span.badge= milestone.issues_visible_to_user(current_user).size
       %li
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_path(milestone) do
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
           Merge Requests
           %span.badge= milestone.merge_requests.size
     - else
       %li.active
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_path(milestone) do
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
           Merge Requests
           %span.badge= milestone.merge_requests.size
     %li
-      = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_path(milestone) do
+      = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
         Participants
         %span.badge= milestone.participants.count
     %li
-      = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_path(milestone) do
+      = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
         Labels
         %span.badge= milestone.labels.count
 
@@ -34,18 +34,14 @@
       = render 'shared/milestones/issues_tab', issues: milestone.issues_visible_to_user(current_user).include_associations, show_project_name: show_project_name, show_full_project_name: show_full_project_name
     .tab-pane#tab-merge-requests
       -# loaded async
-      .text-center.prepend-top-default
-        = icon('spin spinner 2x')
+      = render "shared/milestones/tab_loading"
   - else
     .tab-pane.active#tab-merge-requests
       -# loaded async
-      .text-center.prepend-top-default
-        = icon('spin spinner 2x')
+      = render "shared/milestones/tab_loading"
   .tab-pane#tab-participants
     -# loaded async
-    .text-center.prepend-top-default
-      = icon('spin spinner 2x')
+    = render "shared/milestones/tab_loading"
   .tab-pane#tab-labels
     -# loaded async
-    .text-center.prepend-top-default
-      = icon('spin spinner 2x')
+    = render "shared/milestones/tab_loading"

changelogs/unreleased/async-milestone-tabs.yml

+---
+title: Load milestone tabs asynchronously to increase initial load performance
+merge_request:
+author: