Render only one error message per diff

Move html to haml file instead of JS

app/assets/javascripts/notes.js

@@ -1431,31 +1431,21 @@ export default class Notes {
     syntaxHighlight(fileHolder);
   }
 
-  static renderDiffError($container) {
-    $container.find('.line_content').html(
-      $(`
-        <div class="js-error-load-lazy-diff nothing-here-block">
-          ${sprintf(__('Unable to load the diff.%{buttonStartTag}Try again%{buttonEndTag}?'), {
-            buttonStartTag: '<button type="button" class="btn-link btn-no-padding js-toggle-lazy-diff">',
-            buttonEndTag: '</button>'
-          }, false)}
-        </div>
-      `),
-    );
-  }
-
   loadLazyDiff(e) {
     const $container = $(e.currentTarget).closest('.js-toggle-container');
     Notes.renderPlaceholderComponent($container);
 
     $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');
 
+    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.
@@ -1464,10 +1454,15 @@ export default class Notes {
       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');
       });
     }
   }

app/views/discussions/_diff_with_notes.html.haml

@@ -28,8 +28,11 @@
           %tr.line_holder.line-holder-placeholder
             %td.old_line.diff-line-num
             %td.new_line.diff-line-num
-            %td.line_content
+            %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")
+              = _("Unable to load the diff. %{button_try_again}").html_safe % { button_try_again: button}
           = render "discussions/diff_discussion", discussions: [discussion], expanded: true
   - else
     - partial = (diff_file.new_file? || diff_file.deleted_file?) ? 'single_image_diff' : 'replaced_image_diff'

spec/features/merge_request/user_scrolls_to_note_on_load_spec.rb

@@ -40,7 +40,7 @@ describe 'Merge request > User scrolls to note on load', :js do
     expect(note_element.visible?).to eq true
 
     page.within note_container do
-      expect(page).not_to have_selector('.js-error-load-lazy-diff')
+      expect(page).not_to have_selector('.js-error-lazy-load-diff')
     end
 
   end