Page Comparison

Load mask is a great feature and here in canvas we show load masks when there is an ongoing network request.

There is an option for the implementation team to avoid showing load mask by setting the “syncMode“ as false along with the params.

ExampleProgress Indicators (i.e. load masks) are visual indicators of an activity or background process in an application. However, you might want to turn those off completely or want to show those only when the server response is not received within a specific timeframe.

Disabling Load Mask Completely

To disable the load mask completely, set the syncMode property to ‘false’ as shown in the following sample JS code snippet:

  var param = {
    "PAGE_CODE_TYPE" : 'ALERT_CODE',
    "INPUT_ACTION" : 'UPDATE_REFRESH_ACTION',
    "PRODUCT_NAME" : 'ALERTS',
    "INPUT_FUNCTION_CODE" : 'VSBLTY',
    "INPUT_SUB_PRODUCT" : 'ALERTS',
    "IS_FILTER_FORM" : false,
    "MSG_ID" : msgId
  };
  ct.Ajax({
    params : param,
    syncMode : false,
    success : function(responseP, optionsP) {
      widObj.refreshWidgetData();
    }
  });

However using syncMode will stop showing a load mask, there are still requirements to only show a load mask if you didn’t get the response within a particular time interval. (Say 1 sec).

Implementation team can configure this time interval through env options

...

Displaying Load Mask based on Server Response

Even though Progress Indicators provide visual feedback to users, sometimes you might want to display those only when the server response time is longer. For example, displaying load mask when the data is not received from server within one second. You can achieve this using the following sample code snippet:

ct.env.options.loadMask.delayLoadMaskTimer = 1000;

...

 // unit is in milliseconds

The above sample code will display the load mask only when the server response is longer than one second, thereby shorter server calls (AJAX) will happen behind the scenes without a load - mask.