Use the wait control

This page shows different samples about the wait control.

Go to API Reference for more details.

Tip

Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

Start and end

This sample shows basic start and end operations for the wait control.

  import Controls = require("VSS/Controls");
  import StatusIndicator = require("VSS/Controls/StatusIndicator");

  var container = $(".sample-container");

  var waitControlOptions: StatusIndicator.IWaitControlOptions = {
    target: $("#target"),
    cancellable: true
  };
  
  var waitControl = Controls.create(StatusIndicator.WaitControl, container, waitControlOptions);
  
  // Start operation when the start button is clicked
  $("#start").click(function() { waitControl.startWait(); });
  
  // End operation when the end button is clicked
  $("#end").click(function() { waitControl.endWait(); });

Long running operation

This sample shows a cancellable long running operation which simulates 10 steps. This operation can be cancelled at any time using cancel link or ESC key.

  import Controls = require("VSS/Controls");
  import StatusIndicator = require("VSS/Controls/StatusIndicator");

  var container = $(".sample-container");

  var waitControlOptions: StatusIndicator.IWaitControlOptions = {
    target: $("#target"),
    cancellable: true,
    cancelTextFormat: "{0} to cancel",
    cancelCallback: function() {
      console.log("cancelled");
    }
  };
  
  var opCount: number;
  var currentOp: number;
  function nextOp() {
    currentOp += 1;
    // Check the operation is cancelled
    if (!waitControl.isCancelled()) {
      if (currentOp <= opCount) {
        var message = `Processing ${currentOp} of ${opCount}`;
          waitControl.setMessage(message);
          window.setTimeout(nextOp, Math.ceil(Math.random() * 5000));
      } else {
         waitControl.endWait();
      }
    }
  }

  // Operation starts when long-op button is clicked
  $("#long-op").click(function() {
    opCount = 10;
    currentOp = 0;
    waitControl.startWait();
    nextOp();
  });