Async loading of lang file

[skywarth]

Today while I was implementing this package into some project, I ran into some problem. Occasionally the modal won't load at all with no errors present in console. It would just display half-transparent black overlay background but the modal is not displayed at all. Upon close inspection, I noticed modal content is not loaded neither. But to my surprise, no errors/exceptions present.

Here's the steps I attempted to resolve the issue:

• Re-order my scripts (bootstrap, JQuery, and this library), styles. (✖)
• Call .showDialog() function inside $( document ).ready(function() {}) (✖)
• Call .showDialog() function 2 seconds after the page loads, manually through console. (:heavy_check_mark: )
  • This is not a feasible solution for commercial use
• Then I was able to identify the source of the issue. It was about the fetchContent function whereas it loads the corresponding lang file json in async fashion. As soon as I changed the third parameter to false, it ran smoothly and without any problem. (:heavy_check_mark: )
  • Only downside with this is the fact it now waits for a XHR request to finish, since it is sync

 function fetchContent(lang, callback) {
        const request = new XMLHttpRequest()
        request.overrideMimeType("application/json")
        const url = self.props.contentURL + '/' + lang + '.json'
        // FOCUS START
        request.open('GET', url, true); //changed to false to resolve the issue 
        // FOCUS END

Third parameter on XMLHttpRequest.open is for async XHR request.

An alternative approach to load language config directly from a js variable would be efficient IMO.

[shaack]

Hi, thanks for you contribution, but don't really understand your explanation, as it works with the current code without any problems on the demo site: https://shaack.com/projekte/bootstrap-cookie-consent-settings/examples/cookie-banner-example.html What is the difference to your version?