feat(js): loading visual for datatables;

- Brought back `processing` for datatables.
- Added in pre-init visual for large data tables.

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()