Merge branch 'bpj-mr-loop' into 'master'

Prevent running GfmAutocomplete setup for each diff note

## What does this MR do?

Debounces GfmAutoComplete.setup.

## Why was this MR needed?

See https://gitlab.com/gitlab-org/gitlab-ce/issues/22704

Major lag on MR screens with many diff notes.

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] API support added
- Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
https://gitlab.com/gitlab-org/gitlab-ce/issues/22704

See merge request !6569

CHANGELOG

@@ -117,6 +117,7 @@ v 8.12.2
   - Fix bug where 'Search results' repeated many times when a search in the emoji search form is cleared (Xavier Bick) (@zeiv)
   - Fix resolve discussion buttons endpoint path
   - Refactor remnants of CoffeeScript destructured opts and super !6261
+  - Prevent running GfmAutocomplete setup for each diff note !6569
 
 v 8.12.1
   - Fix a memory leak in HTML::Pipeline::SanitizationFilter::WHITELIST

app/assets/javascripts/gfm_auto_complete.js.es6

@@ -52,37 +52,27 @@
         }
       }
     },
-    setup: function(input) {
+    setup: _.debounce(function(input) {
       // Add GFM auto-completion to all input fields, that accept GFM input.
       this.input = input || $('.js-gfm-input');
       // destroy previous instances
       this.destroyAtWho();
       // set up instances
       this.setupAtWho();
-      if (this.dataSource) {
-        if (!this.dataLoading && !this.cachedData) {
-          this.dataLoading = true;
-          setTimeout((function(_this) {
-            return function() {
-              var fetch;
-              fetch = _this.fetchData(_this.dataSource);
-              return fetch.done(function(data) {
-                _this.dataLoading = false;
-                return _this.loadData(data);
-              });
-            };
-          // We should wait until initializations are done
-          // and only trigger the last .setup since
-          // The previous .dataSource belongs to the previous issuable
-          // and the last one will have the **proper** .dataSource property
-          // TODO: Make this a singleton and turn off events when moving to another page
-          })(this), 1000);
-        }
-        if (this.cachedData != null) {
-          return this.loadData(this.cachedData);
-        }
+
+      if (this.dataSource && !this.dataLoading && !this.cachedData) {
+        this.dataLoading = true;
+        return this.fetchData(this.dataSource)
+          .done((data) => {
+            this.dataLoading = false;
+            this.loadData(data);
+          });
+        };
+
+      if (this.cachedData != null) {
+        return this.loadData(this.cachedData);
       }
-    },
+    }, 1000),
     setupAtWho: function() {
       // Emoji
       this.input.atwho({