Create busy indicators with Angular and FontAwesome

angular-font-awesome-busy

/*
 * Let's say we have a $resource and we want to do some things with it that take time.  
 * Say, saving and submitting - and we have a button for each.  When the user clicks either
 * button, we want to disable both and change the icon of the clicked one to a spinning busy icon.
 * 
 * We'll use a 'isBusy' flag to drive when buttons are disabled, and isSaving and isSubmitting 
 * for each individual action.  Then the ng-class directive gives us an easy way to swap 
 * Font Awesome icon classes.
 *
 * Note that you can add the 'icon-spin' class to any Font Awesome (v3.0) icon to make it spin.
 */

<button class="btn" ng-class="{disabled: isBusy}" type="button" ng-click='save()'>
  Save 
  <i class="icon-white" 
     ng-class="{'icon-save': !isSaving, 'icon-refresh': isSaving, 'icon-spin': isSaving}">
  </i>
</button>

<button class="btn" ng-class="{disabled: isBusy}" type="button" ng-click='submit()'>
    Submit 
    <i class="icon-white" 
       ng-class="{'icon-arrow-right': !isSubmitting, 'icon-refresh': isSubmitting, 'icon-spin': isSubmitting}">
    </i>
</button>

/*
 * The save function is below.  The submit function is left as an excercise for the reader. 
 */
$scope.save = function () {
  $scope.isSaving = true;
  $scope.isBusy = true;
  $scope.timesheet.$save(function callback(response) {
    $scope.isSaving = false;
    $scope.isBusy = false;
  });
};

/*
 * The tests are straightforward with a little Jasmine spying
 */
describe("save timesheet", function () {

  beforeEach(function () {
    scope.timesheet = jasmine.createSpyObj("timesheet", ["$save"]);
    scope.save();
  });

  it("should invoke $save on the current timesheet", function () {
    expect(scope.timesheet.$save).toHaveBeenCalled();
  });

  it("should set scope.isSaving and scope.isBusy to true", function () {
    expect(scope.isSaving).toBeTruthy();
    expect(scope.isBusy).toBeTruthy();
  });

  it("should set scope.isSaving and scope.isBusy to false after the XHR returns", function () {
    var callback = scope.timesheet.$save.mostRecentCall.args[0];
    callback();
    expect(scope.isSaving).toBeFalsy();
    expect(scope.isBusy).toBeFalsy();
  });
});