<div class="modal-body">
  <div class="pull-right" ng-click="vm.close()">
    <span class="glyphicon glyphicon-remove"></span>
  </div>
  <div class="col-xs-12 col-md-8">
    <img style="width: 100%;" ng-src="{{vm.photo.images[0].source}}" />
  </div>
  <div class="col-xs-6 col-md-4">
    <div>
      <img ng-src="{{vm.user.picture.url}}" />
      <b>{{vm.user.name}}</b>
    </div>
    <br>
    <div>
      <p>Likes: {{vm.photo.likes.data.length || '0'}}</p>
    </div>
    <div>
      <es-photo-comments
        comments="vm.photo.comments.data">
      </es-photo-comments>
    </div>
  </div>
</div>

<div class="modal-body">
  <div class="pull-right" ng-click="vm.close()">
    <span class="glyphicon glyphicon-remove"></span>
  </div>
  <div class="col-xs-12 col-md-8">
    <img style="width: 100%;" ng-src="{{vm.photo.images[0].source}}" />
    <div ng-if="!vm.photo" style="margin-top: 25%; text-align: center">
      <h5>Loading image..</h5>
      <span
        us-spinner="{top:'50%'}"
        spinner-start-active="true">
        </span>
    </div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div>
      <img ng-src="{{vm.user.picture.url}}" />
      <b>{{vm.user.name}}</b>
      <div ng-if="!vm.user" style="margin-top: 25%; text-align: center">
        <h5>Loading user info..</h5>
        <span
          us-spinner="{top:'40%'}"
          spinner-start-active="true">
          </span>
      </div>
    </div>
    <br>
    <div>
      <p><em>Likes:</em> <big>{{vm.photo.likes.data.length || '0'}}</big></p>
    </div>
    <div>
      <es-photo-comments
        comments="vm.photo.comments.data">
      </es-photo-comments>
    </div>
  </div>
</div>

Add loading spinner to modal
Add loading spinner to modal
