Update css loading

jet/static/jet/js/main.js

@@ -928,9 +928,33 @@
 
                 $.cookie('JET_THEME', $link.data('theme'), { expires: 365, path: '/' });
 
-                $('#base-stylesheet').attr('href', $link.data('base-stylesheet'));
-                $('#select2-stylesheet').attr('href', $link.data('select2-stylesheet'));
-                $('#jquery-ui-stylesheet').attr('href', $link.data('jquery-ui-stylesheet'));
+                var cssToLoad = [
+                    { url: $link.data('base-stylesheet'), class: 'base-stylesheet' },
+                    { url: $link.data('select2-stylesheet'), class: 'select2-stylesheet' },
+                    { url: $link.data('jquery-ui-stylesheet'), class: 'jquery-ui-stylesheet' }
+                ];
+
+                var loadedCss = 0;
+
+                var onCssLoaded = function() {
+                    ++loadedCss;
+
+                    if (loadedCss == cssToLoad.length) {
+                        $(document).trigger('theme:changed');
+                    }
+                };
+
+                cssToLoad.forEach(function(css) {
+                    $('<link>')
+                        .attr('rel', 'stylesheet')
+                        .addClass(css['class'])
+                        .attr('href', css['url'])
+                        .load(onCssLoaded)
+                        .appendTo('head');
+                    $('.' + css['class'])
+                        .slice(0, -2)
+                        .remove();
+                });
 
                 $('.choose-theme').removeClass('selected');
                 $link.addClass('selected');

jet/templates/admin/base.html

@@ -12,9 +12,9 @@
     <link href="{% static "jet/vendor/jquery-ui-timepicker/jquery.ui.timepicker.css" %}" rel="stylesheet" />
     <link href="{% static "jet/vendor/perfect-scrollbar/css/perfect-scrollbar.css" %}" rel="stylesheet" />
     <link href="{% static "jet/css/icons/style.css" %}?v={{ JET_VERSION }}" rel="stylesheet" />
-    <link href="{% static "jet/css/themes/"|add:THEME|add:"/base.css" %}?v={{ JET_VERSION }}" rel="stylesheet" id="base-stylesheet" />
-    <link href="{% static "jet/css/themes/"|add:THEME|add:"/select2.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" id="select2-stylesheet" />
-    <link href="{% static "jet/css/themes/"|add:THEME|add:"/jquery-ui.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" id="jquery-ui-stylesheet" />
+    <link href="{% static "jet/css/themes/"|add:THEME|add:"/base.css" %}?v={{ JET_VERSION }}" rel="stylesheet" class="base-stylesheet" />
+    <link href="{% static "jet/css/themes/"|add:THEME|add:"/select2.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" class="select2-stylesheet" />
+    <link href="{% static "jet/css/themes/"|add:THEME|add:"/jquery-ui.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" class="jquery-ui-stylesheet" />
     <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="{% block stylesheet_ie %}{% static "admin/css/ie.css" %}{% endblock %}" /><![endif]-->
     {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}" />{% endif %}
     {% block extrastyle %}{% endblock %}