Datatables Loading Icon

ckanext/canada/assets/datatables/canada_datatables.css

@@ -0,0 +1,28 @@
+/*####################
+## Datatables Views ##
+######################*/
+div#dtprv_processing.dataTables_processing{
+  z-index: 9999 !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  /* see static/js/canada_datatables for dynamic styles */
+}
+div#dtprv_processing.dataTables_processing > div:last-child{
+  position: absolute !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  pointer-events: none !important;
+  /* see static/js/canada_datatables for dynamic styles */
+}
+div#dtprv_processing.dataTables_processing > div:last-child > div{
+  background-color: #335075 !important;
+  pointer-events: none !important;
+}
+/*#####################
+##       END         ##
+##  Datatables Views ##
+##       END         ##
+#######################*/

ckanext/canada/assets/datatables/canada_datatables.js

@@ -0,0 +1,31 @@
+window.addEventListener('load', function(){
+
+  $(document).on('preInit.dt', function(_event, _settings){
+
+    $('body.dt-view').css('visibility', 'visible');
+    $('#dtprv_processing').css({
+      'background-color': 'rgba(255, 255, 255, 1)',
+      'display': 'block',
+      'pointer-events': 'all',
+    });
+    $('#dtprv_processing > div').css('top', '15%');
+
+  });
+
+  $(document).on('init.dt', function(){
+
+    $('#dtprv_processing').css({
+      'background-color': 'rgba(255, 255, 255, 0.65)',
+      'pointer-events': 'none',
+    });
+    $('#dtprv_processing > div').css('top', '50%');
+
+  });
+
+  $(document).on('processing.dt', function(_event, _settings, _processing){
+
+    $('#dtprv_processing').css('display', _processing ? 'block' : 'none');
+
+  });
+
+});

ckanext/canada/assets/datatables/webassets.yml

@@ -0,0 +1,9 @@
+css:
+  contents:
+    - canada_datatables.css
+  output: canada_datatables/%(version)s_canada_datatables.css
+
+js:
+  contents:
+    - canada_datatables.js
+  output: canada_datatables/%(version)s_canada_datatables.js

ckanext/canada/plugins.py

@@ -448,6 +448,7 @@ def update_config(self, config):
         p.toolkit.add_template_directory(config, 'templates/public')
         p.toolkit.add_public_directory(config, 'public')
         p.toolkit.add_resource('public/static/js', 'js')
+        p.toolkit.add_resource('assets/datatables', 'canada_datatables')
         config['ckan.auth.public_user_details'] = False
         config['recombinant.definitions'] = """
 ckanext.canada:tables/ati.yaml

ckanext/canada/templates/public/datatables/datatables_view.html

@@ -1,5 +1,14 @@
 {% ckan_extends %}
 
+{% block page %}
+  {{ super() }}
+  <div id="dtprv_processing" class="dataTables_processing card">
+    <div>
+      <div></div><div></div><div></div><div></div>
+    </div>
+  </div>
+{% endblock %}
+
 {%- block datatable_column_label -%}
   {%- set label = 'label_' + h.lang() -%}
   {%- set description = 'notes_' + h.lang() -%}
@@ -61,4 +70,10 @@
   {%- endblock -%}
   {% block google_analytics_footer %}{%- endblock -%}
   {{ super() }}
+  {% asset 'canada_datatables/js' %}
 {% endblock %}
+
+{%- block styles %}
+  {{ super() }}
+  {% asset 'canada_datatables/css' %}
+{%- endblock -%}