1 files changed, 32 insertions, 16 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index b0573510ff9..96f2b3eac98 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -19,7 +19,6 @@ import AjaxCache from '~/lib/utils/ajax_cache';
 import Vue from 'vue';
 import syntaxHighlight from '~/syntax_highlight';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
@@ -198,6 +197,8 @@ 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.onClickRetryLazyLoad.bind(this));
+
     // fetch notes when tab becomes visible
     this.$wrapperEl.on('visibilitychange', this.visibilityChange);
     // when issue status changes, we need to refresh data
@@ -244,6 +245,7 @@ export default class Notes {
     this.$wrapperEl.off('click', '.js-comment-resolve-button');
     this.$wrapperEl.off('click', '.system-note-commit-list-toggler');
     this.$wrapperEl.off('click', '.js-toggle-lazy-diff');
+    this.$wrapperEl.off('click', '.js-toggle-lazy-diff-retry-button');
     this.$wrapperEl.off('ajax:success', '.js-main-target-form');
     this.$wrapperEl.off('ajax:success', '.js-discussion-note-form');
     this.$wrapperEl.off('ajax:complete', '.js-main-target-form');
@@ -1425,22 +1427,21 @@ export default class Notes {
     const { discussion_html } = data;
     const lines = $(discussion_html).find('.line_holder');
     lines.addClass('fade-in');
-    $container.find('tbody').prepend(lines);
+    $container.find('.diff-content > table > tbody').prepend(lines);
     const fileHolder = $container.find('.file-holder');
     $container.find('.line-holder-placeholder').remove();
     syntaxHighlight(fileHolder);
   }
 
-  static renderDiffError($container) {
-    $container.find('.line_content').html(
-      $(`
-        <div class="nothing-here-block">
-          ${__(
-            'Unable to load the diff.',
-          )} <a class="js-toggle-lazy-diff" href="javascript:void(0)">Try again</a>?
-        </div>
-      `),
-    );
+  onClickRetryLazyLoad(e) {
+    const $retryButton = $(e.currentTarget);
+
+    $retryButton.prop('disabled', true);
+
+    return this.loadLazyDiff(e)
+    .then(() => {
+      $retryButton.prop('disabled', false);
+    });
   }
 
   loadLazyDiff(e) {
@@ -1449,20 +1450,35 @@ export default class Notes {
 
     $container.find('.js-toggle-lazy-diff').removeClass('js-toggle-lazy-diff');
 
-    const tableEl = $container.find('tbody');
-    if (tableEl.length === 0) return;
+    const $tableEl = $container.find('tbody');
+    if ($tableEl.length === 0) return;
 
     const fileHolder = $container.find('.file-holder');
     const url = fileHolder.data('linesPath');
 
-    axios
+    const $errorContainer = $container.find('.js-error-lazy-load-diff');
+    const $successContainer = $container.find('.js-success-lazy-load');
+
+    /**
+     * We only fetch resolved discussions.
+     * Unresolved discussions don't have an endpoint being provided.
+     */
+    if (url) {
+      return axios
       .get(url)
       .then(({ data }) => {
+        // Reset state in case last request returned error
+        $successContainer.removeClass('hidden');
+        $errorContainer.addClass('hidden');
+
         Notes.renderDiffContent($container, data);
       })
       .catch(() => {
-        Notes.renderDiffError($container);
+        $successContainer.addClass('hidden');
+        $errorContainer.removeClass('hidden');
       });
+    }
+    return Promise.resolve();
   }
 
   toggleCommitList(e) {