Updates to cropper css loading

Fixed Data Property Name
Added safe guard to css check
Added Changelog

app/assets/javascripts/lib/utils/css_utils.js

 export function loadCSSFile(path) {
   return new Promise(resolve => {
-    const linkElement = document.createElement('link');
-    linkElement.type = 'text/css';
-    linkElement.rel = 'stylesheet';
-    // eslint-disable-next-line @gitlab/require-i18n-strings
-    linkElement.media = 'screen,print';
-    linkElement.onload = () => {
+    if (document.querySelector(`link[href="${path}"]`)) {
       resolve();
-    };
-    linkElement.href = path;
+    } else {
+      const linkElement = document.createElement('link');
+      linkElement.type = 'text/css';
+      linkElement.rel = 'stylesheet';
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      linkElement.media = 'screen,print';
+      linkElement.onload = () => {
+        resolve();
+      };
+      linkElement.href = path;
 
-    document.head.appendChild(linkElement);
+      document.head.appendChild(linkElement);
+    }
   });
 }

app/assets/javascripts/profile/gl_crop.js

@@ -181,8 +181,8 @@ import { loadCSSFile } from '../lib/utils/css_utils';
     }
   }
 
-  if (document.querySelector('.modal-profile-crop'))
-    loadCSSFile(document.querySelector('.modal-profile-crop').dataset.croppercsspath);
+  const cropModal = document.querySelector('.modal-profile-crop');
+  if (cropModal) loadCSSFile(cropModal.dataset.cropperCssPath);
 
   $.fn.glCrop = function(opts) {
     return this.each(function() {

app/views/profiles/show.html.haml

@@ -122,7 +122,7 @@
         = f.submit s_("Profiles|Update profile settings"), class: 'btn btn-success'
         = link_to _("Cancel"), user_path(current_user), class: 'btn btn-cancel'
 
-.modal.modal-profile-crop{ data: { croppercsspath: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
+.modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
   .modal-dialog
     .modal-content
       .modal-header

changelogs/unreleased/tz-lazy-load-cropper.yml

+---
+title: Loads cropper css only when needed
+merge_request: 44137
+author:
+type: performance