Merge pull request #7900 from JVickery-TBS/feature/datatables-processing

Datatables Processing Visuals

changes/7900.feature

@@ -0,0 +1 @@
+Added processing and pre-processing indicators to Datatables Views.

ckanext/datatablesview/assets/datatables_view.css

@@ -28,6 +28,19 @@ div.dataTables_scroll{
 /* processing message should hover over table and be visible */
 #dtprv_processing {
   z-index: 100;
+  display: block;
+}
+
+#dtprv_processing.pre-init::after{
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  z-index: -1;
 }
 
 /* for table header, don't wrap */

ckanext/datatablesview/assets/datatablesview.js

@@ -476,10 +476,16 @@ this.ckan.module('datatables_view', function (jQuery) {
       })
 
       // init the datatable
+      $('#dtprv').on('preInit.dt', function (_event, _settings) {
+        // show loading indicator when first painting data into the table.
+        // useful with very large resources that take long to load
+        $('body.dt-view').css('visibility', 'visible');
+        $('#dtprv_processing').addClass('pre-init');
+      });
       datatable = $('#dtprv').DataTable({
         paging: true,
         serverSide: true,
-        processing: false,
+        processing: true,
         stateSave: statesaveflag,
         stateDuration: stateduration,
         colReorder: {
@@ -592,6 +598,9 @@ this.ckan.module('datatables_view', function (jQuery) {
             api.page(gsavedPage)
           }
 
+          // hide the pre-loading indicator background so the table is interactive when loading
+          $('#dtprv_processing').removeClass('pre-init');
+
           // restore selected rows from state
           if (typeof gsavedSelected !== 'undefined') {
             api.rows(gsavedSelected).select()