Disable try again button while fetching the API

3 files changed, 35 insertions, 3 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index a4669b1672a..a07af3ee93a 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -197,7 +197,7 @@ export default class Notes {
     );
 
     this.$wrapperEl.on('click', '.js-toggle-lazy-diff', this.loadLazyDiff);
-    this.$wrapperEl.on('click', '.js-toggle-lazy-diff-retry-button', this.loadLazyDiff);
+    this.$wrapperEl.on('click', '.js-toggle-lazy-diff-retry-button', this.onClickRetryLazyLoad.bind(this));
 
     // fetch notes when tab becomes visible
     this.$wrapperEl.on('visibilitychange', this.visibilityChange);
@@ -1433,6 +1433,17 @@ export default class Notes {
     syntaxHighlight(fileHolder);
   }
 
+  onClickRetryLazyLoad(e) {
+    const $retryButton = $(e.currentTarget);
+
+    $retryButton.prop('disabled', true);
+
+    return this.loadLazyDiff(e)
+    .then(() => {
+      $retryButton.prop('disabled', false);
+    });
+  }
+
   loadLazyDiff(e) {
     const $container = $(e.currentTarget).closest('.js-toggle-container');
     Notes.renderPlaceholderComponent($container);
@@ -1453,7 +1464,7 @@ export default class Notes {
      * Unresolved discussions don't have an endpoint being provided.
      */
     if (url) {
-      axios
+      return axios
       .get(url)
       .then(({ data }) => {
         // Reset state in case last request returned error
@@ -1467,6 +1478,7 @@ export default class Notes {
         $errorContainer.removeClass('hidden');
       });
     }
+    return Promise.resolve();
   }
 
   toggleCommitList(e) {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 4692d0fb873..85beba92da4 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -762,3 +762,23 @@
     max-width: 100%;
   }
 }
+
+// Hack alert: we've rewritten `btn` class in a way that
+// we've broken it and it is not possible to use with `btn-link`
+// wich causes a blank button when it's disabled and hovering
+// The css in here is the boostrap one
+.btn-link-retry {
+
+  &[disabled] {
+    cursor: not-allowed;
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    opacity: .65;
+
+    &:hover {
+      color: #777;
+      text-decoration: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index e026e6a83ae..b27d73c803c 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -31,7 +31,7 @@
             %td.line_content.js-success-lazy-load
               .js-code-placeholder
             %td.line_content.js-error-lazy-load-diff.hidden
-              - button = button_tag(_("Try again"), class: "btn-link btn-no-padding js-toggle-lazy-diff-retry-button")
+              - button = button_tag(_("Try again"), class: "btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button")
               = _("Unable to load the diff. %{button_try_again}").html_safe % { button_try_again: button}
           = render "discussions/diff_discussion", discussions: [discussion], expanded: true
   - else