Fixing race condition in select2 language initialization

openHPI · Mar 15, 2024 · 1077b98 · 1077b98
1 parent cfed5bb
commit 1077b98
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/app/assets/javascripts/labels.coffee.erb b/app/assets/javascripts/labels.coffee.erb
@@ -11,6 +11,7 @@ root = exports ? this;
 root.verify_label_name = verify_label_name;
 
 ready = ->
+  console.log("labels coffee called")
   default_label_color = "e4e4e4"
   default_label_font_color = "000000"
 
@@ -95,4 +96,6 @@ clear_input = ->
   $('.labels-select2-tag').siblings(".select2").find("textarea").val("");
   return
 
-$(document).on 'turbolinks:load', ready
+
+window.select2_locales_loaded.then(ready)
+console.log("labels coffee select2_locales_loaded then registered")
diff --git a/app/assets/javascripts/tasks_form.coffee b/app/assets/javascripts/tasks_form.coffee
@@ -1,11 +1,13 @@
-ready =->
-  initializeLoadSelect2()
+ready = ->
   initializeFileTypeSelection()
   initializeVisibilityWarning()
 
 $(document).on('turbolinks:load', ready)
+window.select2_locales_loaded.then(initializeLoadSelect2)
+console.log("task_form select2_locales_loaded then registered")
 
 initializeLoadSelect2 = ->
+  console.log("task_form called")
   $('#task_programming_language_id').select2
     language: I18n.locale
     tags: false

diff --git a/app/assets/javascripts/tasks_index.coffee b/app/assets/javascripts/tasks_index.coffee
@@ -1,5 +1,4 @@
 ready = ->
-  initializeSelect2()
   initCollapsable($('.description'), '95px')
   window.addEventListener 'resize', -> initCollapsable($('.description'), '95px')
   initializeDynamicHideShow()
@@ -8,13 +7,16 @@ ready = ->
   initializeInputFieldEnterCallback()
 
 $(document).on('turbolinks:load', ready)
+window.select2_locales_loaded.then(initializeSelect2)
+console.log("task_index select2_locales_loaded then registered")
 
 initializeDynamicHideShow = ->
   $('body').on 'click', '.more-btn-wrapper', (event) ->
     event.preventDefault()
     toggleHideShowMore $(this)
 
 initializeSelect2 = ->
+  console.log("task index called")
   $('.defaultSelect2').select2
     language: I18n.locale
     minimumResultsForSearch: 10
@@ -103,14 +105,8 @@ intializeAdvancedFilter = ->
       $drop.removeClass('fa-caret-down').addClass('fa-caret-up')
 
   if $('#order_param')
-#    $('#' + order.value).addClass('active')
     $('#order_created').addClass('active')
 
-  #  $('#order_rating').click ->
-  #    $('#order_rating').addClass('active')
-  #    $('#order_created').removeClass('active')
-  #    document.getElementById('order_param').value = 'order_rating'
-
   $('#order_created').click ->
     $('#order_created').addClass('active')
     $('#order_rating').removeClass('active')

diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -47,7 +47,18 @@ import 'jquery-ui/themes/base/sortable.css'
 // I18n locales
 import { I18n } from "i18n-js";
 import locales from "../../tmp/locales.json";
-Object.keys(locales).forEach(locale => import(`select2/dist/js/i18n/${locale}`));
+
+// create a promise that only gets resolved when turbolinks:load fired and all select2 locales have been loaded
+let select2_locales_loaded = new Promise((resolve, reject) => {
+  document.addEventListener('turbolinks:load', resolve);
+});
+Object.keys(locales).forEach(locale =>
+    select2_locales_loaded = Promise.all([select2_locales_loaded, import(`select2/dist/js/i18n/${locale}`)])
+);
+window.select2_locales_loaded = select2_locales_loaded;
+
+select2_locales_loaded.then(() => console.log("promise resolved"))
+
 
 // Fetch user locale from html#lang.
 // This value is being set on `app/views/layouts/application.html.slim` and