Replaced all jquery fade functions

Both fadeIn + fadeOut to make transition to jquery slim possible

Changed where possible to use gl-display-none

Went back to hide util class

Introducing more gl-display-none

app/assets/javascripts/commit/image_file.js

@@ -27,7 +27,7 @@ export default class ImageFile {
 
   initViewModes() {
     const viewMode = viewModes[0];
-    $('.view-modes', this.file).removeClass('hide');
+    $('.view-modes', this.file).removeClass('gl-display-none');
     $('.view-modes-menu', this.file).on('click', 'li', event => {
       if (!$(event.currentTarget).hasClass('active')) {
         return this.activateViewMode(event.currentTarget.className);
@@ -42,12 +42,10 @@ export default class ImageFile {
       .filter(`.${viewMode}`)
       .addClass('active');
 
-    // eslint-disable-next-line no-jquery/no-fade
-    return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(200, () => {
-      // eslint-disable-next-line no-jquery/no-fade
-      $(`.view.${viewMode}`, this.file).fadeIn(200);
-      return this.initView(viewMode);
-    });
+    $(`.view:visible:not(.${viewMode})`, this.file).addClass('gl-display-none');
+    $(`.view.${viewMode}`, this.file).removeClass('gl-display-none');
+
+    return this.initView(viewMode);
   }
 
   initView(viewMode) {
@@ -120,7 +118,7 @@ export default class ImageFile {
         return this.requestImageInfo($('img', wrap), (width, height) => {
           $('.image-info .meta-width', wrap).text(`${width}px`);
           $('.image-info .meta-height', wrap).text(`${height}px`);
-          return $('.image-info', wrap).removeClass('hide');
+          return $('.image-info', wrap).removeClass('gl-display-none');
         });
       });
     },

app/assets/javascripts/due_date_select.js

@@ -119,20 +119,18 @@ class DueDateSelect {
   }
 
   updateIssueBoardIssue() {
-    // eslint-disable-next-line no-jquery/no-fade
-    this.$loading.fadeIn();
+    this.$loading.removeClass('gl-display-none');
     this.$dropdown.trigger('loading.gl.dropdown');
     this.$selectbox.hide();
     this.$value.css('display', '');
-    const fadeOutLoader = () => {
-      // eslint-disable-next-line no-jquery/no-fade
-      this.$loading.fadeOut();
+    const hideLoader = () => {
+      this.$loading.addClass('gl-display-none');
     };
 
     boardsStore.detail.issue
       .update(this.$dropdown.attr('data-issue-update'))
-      .then(fadeOutLoader)
-      .catch(fadeOutLoader);
+      .then(hideLoader)
+      .catch(hideLoader);
   }
 
   submitSelectedDate(isDropdown) {
@@ -140,8 +138,7 @@ class DueDateSelect {
     const hasDueDate = this.displayedDate !== __('None');
     const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
 
-    // eslint-disable-next-line no-jquery/no-fade
-    this.$loading.removeClass('hidden').fadeIn();
+    this.$loading.removeClass('gl-display-none');
 
     if (isDropdown) {
       this.$dropdown.trigger('loading.gl.dropdown');
@@ -164,8 +161,7 @@ class DueDateSelect {
       }
       this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
 
-      // eslint-disable-next-line no-jquery/no-fade
-      return this.$loading.fadeOut();
+      return this.$loading.addClass('gl-display-none');
     });
   }
 }
@@ -211,7 +207,8 @@ export default class DueDateSelectors {
   initIssuableSelect() {
     const $loading = $('.js-issuable-update .due_date')
       .find('.block-loading')
-      .hide();
+      .removeClass('hidden')
+      .addClass('gl-display-none');
 
     $('.js-due-date-select').each((i, dropdown) => {
       const $dropdown = $(dropdown);

app/assets/javascripts/filterable_list.js

@@ -64,8 +64,7 @@ export default class FilterableList {
       return false;
     }
 
-    // eslint-disable-next-line no-jquery/no-fade
-    $(this.listHolderElement).fadeTo(250, 0.5);
+    $(this.listHolderElement).addClass('gl-opacity-5');
 
     this.isBusy = true;
 
@@ -99,7 +98,6 @@ export default class FilterableList {
 
   onFilterComplete() {
     this.isBusy = false;
-    // eslint-disable-next-line no-jquery/no-fade
-    $(this.listHolderElement).fadeTo(250, 1);
+    $(this.listHolderElement).removeClass('gl-opacity-5');
   }
 }

app/assets/javascripts/labels_select.js

@@ -45,8 +45,7 @@ export default class LabelsSelect {
       const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
       const $value = $block.find('.value');
       const $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
-      // eslint-disable-next-line no-jquery/no-fade
-      const $loading = $block.find('.block-loading').fadeOut();
+      const $loading = $block.find('.block-loading').addClass('gl-display-none');
       const fieldName = $dropdown.data('fieldName');
       let initialSelected = $selectbox
         .find(`input[name="${$dropdown.data('fieldName')}"]`)
@@ -83,15 +82,13 @@ export default class LabelsSelect {
         if (!selected.length) {
           data[abilityName].label_ids = [''];
         }
-        // eslint-disable-next-line no-jquery/no-fade
-        $loading.removeClass('hidden').fadeIn();
+        $loading.removeClass('gl-display-none');
         $dropdown.trigger('loading.gl.dropdown');
         axios
           .put(issueUpdateURL, data)
           .then(({ data }) => {
             let template;
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.fadeOut();
+            $loading.addClass('gl-display-none');
             $dropdown.trigger('loaded.gl.dropdown');
             $selectbox.hide();
             data.issueUpdateURL = issueUpdateURL;
@@ -340,9 +337,8 @@ export default class LabelsSelect {
           const { $el, e, isMarking } = clickEvent;
           const label = clickEvent.selectedObj;
 
-          const fadeOutLoader = () => {
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.fadeOut();
+          const hideLoader = () => {
+            $loading.addClass('gl-display-none');
           };
 
           const page = $('body').attr('data-page');
@@ -403,8 +399,7 @@ export default class LabelsSelect {
               boardsStore.detail.issue.labels = labels;
             }
 
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.fadeIn();
+            $loading.removeClass('gl-display-none');
             const oldLabels = boardsStore.detail.issue.labels;
 
             boardsStore.detail.issue
@@ -420,8 +415,8 @@ export default class LabelsSelect {
                     .removeClass('is-active');
                 }
               })
-              .then(fadeOutLoader)
-              .catch(fadeOutLoader);
+              .then(hideLoader)
+              .catch(hideLoader);
           } else if (handleClick) {
             e.preventDefault();
             handleClick(label);

app/assets/javascripts/main.js

@@ -136,10 +136,9 @@ function deferredInitialisation() {
   $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
     tooltips.dispose(this);
 
-    // eslint-disable-next-line no-jquery/no-fade
     $(this)
       .closest('li')
-      .fadeOut();
+      .addClass('gl-display-none!');
   });
 
   $('.js-remove-tr').on('ajax:before', function removeTRAjaxBeforeCallback() {
@@ -147,10 +146,9 @@ function deferredInitialisation() {
   });
 
   $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
-    // eslint-disable-next-line no-jquery/no-fade
     $(this)
       .closest('tr')
-      .fadeOut();
+      .addClass('gl-display-none!');
   });
 
   const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');

app/assets/javascripts/milestone_select.js

@@ -53,8 +53,7 @@ export default class MilestoneSelect {
       const $block = $selectBox.closest('.block');
       const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
       const $value = $block.find('.value');
-      // eslint-disable-next-line no-jquery/no-fade
-      const $loading = $block.find('.block-loading').fadeOut();
+      const $loading = $block.find('.block-loading').addClass('gl-display-none');
       selectedMilestoneDefault = showAny ? '' : null;
       selectedMilestoneDefault =
         showNo && defaultNo ? __('No milestone') : selectedMilestoneDefault;
@@ -255,34 +254,29 @@ export default class MilestoneSelect {
             }
 
             $dropdown.trigger('loading.gl.dropdown');
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.removeClass('hidden').fadeIn();
+            $loading.removeClass('gl-display-none');
 
             boardsStore.detail.issue
               .update($dropdown.attr('data-issue-update'))
               .then(() => {
                 $dropdown.trigger('loaded.gl.dropdown');
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
               })
               .catch(() => {
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
               });
           } else {
             selected = $selectBox.find('input[type="hidden"]').val();
             data = {};
             data[abilityName] = {};
             data[abilityName].milestone_id = selected != null ? selected : null;
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.removeClass('hidden').fadeIn();
+            $loading.removeClass('gl-display-none');
             $dropdown.trigger('loading.gl.dropdown');
             return axios
               .put(issueUpdateURL, data)
               .then(({ data }) => {
                 $dropdown.trigger('loaded.gl.dropdown');
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
                 $selectBox.hide();
                 $value.css('display', '');
                 if (data.milestone != null) {
@@ -313,8 +307,7 @@ export default class MilestoneSelect {
                   .text(__('None'));
               })
               .catch(() => {
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
               });
           }
         },

app/assets/javascripts/users_select/index.js

@@ -63,8 +63,7 @@ function UsersSelect(currentUser, els, options = {}) {
     const abilityName = $dropdown.data('abilityName');
     let $value = $block.find('.value');
     const $collapsedSidebar = $block.find('.sidebar-collapsed-user');
-    // eslint-disable-next-line no-jquery/no-fade
-    const $loading = $block.find('.block-loading').fadeOut();
+    const $loading = $block.find('.block-loading').addClass('gl-display-none');
     const selectedIdDefault = defaultNullUser && showNullUser ? 0 : null;
     let selectedId = $dropdown.data('selected');
     let assignTo;
@@ -205,16 +204,14 @@ function UsersSelect(currentUser, els, options = {}) {
       const data = {};
       data[abilityName] = {};
       data[abilityName].assignee_id = selected != null ? selected : null;
-      // eslint-disable-next-line no-jquery/no-fade
-      $loading.removeClass('hidden').fadeIn();
+      $loading.removeClass('gl-display-none');
       $dropdown.trigger('loading.gl.dropdown');
 
       return axios.put(issueURL, data).then(({ data }) => {
         let user = {};
         let tooltipTitle = user.name;
         $dropdown.trigger('loaded.gl.dropdown');
-        // eslint-disable-next-line no-jquery/no-fade
-        $loading.fadeOut();
+        $loading.addClass('gl-display-none');
         if (data.assignee) {
           user = {
             name: data.assignee.name,

app/views/projects/diffs/_replaced_image_diff.html.haml

@@ -14,7 +14,7 @@
     .wrap
       .frame.deleted
         = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
-      %p.image-info.hide
+      %p.image-info.gl-display-none
         %span.meta-filesize= number_to_human_size(old_blob.size)
         |
         %strong W:
@@ -24,7 +24,7 @@
         %span.meta-height
     .wrap
       = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_url, alt: diff_file.new_path }
-      %p.image-info.hide
+      %p.image-info.gl-display-none
         %span.meta-filesize= number_to_human_size(blob.size)
         |
         %strong W:
@@ -33,7 +33,7 @@
         %strong H:
         %span.meta-height
 
-  .swipe.view.hide
+  .swipe.view.gl-display-none
     .swipe-frame
       .frame.deleted.old-diff
         = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
@@ -43,7 +43,7 @@
         %span.top-handle
         %span.bottom-handle
 
-  .onion-skin.view.hide
+  .onion-skin.view.gl-display-none
     .onion-skin-frame
       .frame.deleted
         = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
@@ -54,7 +54,7 @@
           .dragger{ :style => "left: 0px;" }
         .opaque
 
-.view-modes.hide
+.view-modes.gl-display-none
   %ul.view-modes-menu
     %li.two-up{ data: { mode: 'two-up' } } 2-up
     %li.swipe{ data: { mode: 'swipe' } } Swipe

ee/app/assets/javascripts/weight_select.js

@@ -11,8 +11,7 @@ function WeightSelect(els, options = {}) {
     const $selectbox = $dropdown.closest('.selectbox');
     const $block = $selectbox.closest('.block');
     const $value = $block.find('.value');
-    // eslint-disable-next-line no-jquery/no-fade
-    $block.find('.block-loading').fadeOut();
+    $block.find('.block-loading').addClass('gl-display-none');
     const fieldName = options.fieldName || $dropdown.data('fieldName');
     const inputField = $dropdown.closest('.selectbox').find(`input[name='${fieldName}']`);