Protractor takes too long to click on an element
<p>I have the following part of the web page that I want to click using Protractor+Cucumber:</p>

<pre><code>    &lt;div ng-show="entities.length" ng-repeat="entity in entities track by entity.id" op-library-inject=""&gt;
                        &lt;op-box template-path="components" type="media" settings="boxSettings" entity="entity" index="0"&gt;&lt;div class="box-container" ng-class="{'box-media-checked': entity.checked}"&gt;
        &lt;div data-media-id="1234" data-media-username="enfesyiyecek" id="box-1234" class="box-wrapper"&gt;
            &lt;div class="box-media-wrapper" style="background-image:url(https://s3.amazonaws.com/photorank-media/media/8/b/j/8bj2iu3/mobile.jpg)"&gt;
                &lt;!-- ngIf: ::(settings.showCheckbox) --&gt;&lt;input class="box-media-check ng-pristine ng-untouched ng-valid" value="1" id="box-check-1234" name="check-1234" ng-model="entity.checked" ng-change="checkboxChange()" ng-if="::(settings.showCheckbox)" type="checkbox"&gt;&lt;!-- end ngIf: ::(settings.showCheckbox) --&gt;
                &lt;!-- ngIf: ::(settings.showCheckbox) --&gt;&lt;div class="box-check" ng-if="::(settings.showCheckbox)"&gt;
                    &lt;label for="box-check-1234"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/label&gt;
                &lt;/div&gt;&lt;!-- end ngIf: ::(settings.showCheckbox) --&gt;
                &lt;!-- ngIf: ::(entity.video_url) --&gt;&lt;div class="box-play" ng-if="::(entity.video_url)" ng-click="photoClick(index)"&gt;&lt;i class="fa fa-play"&gt;&lt;/i&gt;&lt;/div&gt;&lt;!-- end ngIf: ::(entity.video_url) --&gt;
                &lt;div class="box-hover" ng-click="photoClick(index)"&gt;&lt;/div&gt;
                &lt;div class="box-badges"&gt;
                    &lt;ul class="badges-list"&gt;
                        &lt;!-- ngRepeat: action in actionsBadges track by action.id --&gt;&lt;!-- ngIf: action.showIf(entity) --&gt;&lt;!-- end ngRepeat: action in actionsBadges track by action.id --&gt;&lt;!-- ngIf: action.showIf(entity) --&gt;&lt;!-- end ngRepeat: action in actionsBadges track by action.id --&gt;&lt;!-- ngIf: action.showIf(entity) --&gt;&lt;!-- end ngRepeat: action in actionsBadges track by action.id --&gt;&lt;!-- ngIf: action.showIf(entity) --&gt;&lt;!-- end ngRepeat: action in actionsBadges track by action.id --&gt;&lt;!-- ngIf: action.showIf(entity) --&gt;&lt;!-- end ngRepeat: action in actionsBadges track by action.id --&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="box-info-wrapper" ng-class="{'box-info-wrapper-complete-caption': showCompleteCaption}"&gt;
                &lt;div class="box-tools"&gt;
                    ....
                        &lt;/div&gt;
                    &lt;/li&gt;&lt;!-- end ngIf: actionsToolsMore.length --&gt;
                &lt;/div&gt;
                &lt;div class="box-date-location-wrapper box-section-wrapper"&gt;
                    &lt;ul&gt;
                       ...
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="box-name-actions-wrapper box-section-wrapper"&gt;
                    &lt;ul&gt;
                        &lt;li class="box-name-wrapper"&gt;
                           ...

                        &lt;/li&gt;
                        &lt;li class="box-actions-wrapper"&gt;
                            &lt;div class="box-actions"&gt;
                                &lt;ul&gt;
                                    &lt;!-- ngRepeat: action in actionsSubTools track by action.id --&gt;&lt;!-- ngIf: action.showIf(entity) --&gt;&lt;li ng-repeat="action in actionsSubTools track by action.id" ng-if="action.showIf(entity)"&gt;
                           ...
                                    &lt;/li&gt;&lt;!-- end ngIf: action.showIf(entity) --&gt;&lt;!-- end ngRepeat: action in actionsSubTools track by action.id --&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="box-caption-wrapper box-section-wrapper" ng-click="toogleCaption()" ng-class="box-caption-wrapper-click"&gt;
                    &lt;p class="box-caption-small"&gt;...
                &lt;/div&gt;
                &lt;div class="fade-out ng-hide" ng-show="showCompleteCaption" ng-click="toogleCaption()"&gt;&lt;/div&gt;
                &lt;div class="box-tags-stream-wrapper"&gt;
                   ...
        &lt;div class="slider-container show-arrows" ng-class="{'show-arrows': shouldShowArrows()}"&gt;
            &lt;div class="products-slider"&gt;
                ...
            &lt;a ng-click="moveSliderToTheLeft()" class="slider-action slider-action-back -disabled" href="javascript:;" ng-class="{'-disabled': !canMoveSliderToTheLeft()}"&gt;&lt;i class="fa fa-caret-left"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a ng-click="moveSliderToTheRight()" class="slider-action slider-action-forward" href="javascript:;" ng-class="{'-disabled': !canMoveSliderToTheRight()}"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/op-box-slider&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  ...
                    &lt;/div&gt;&lt;!-- end ngIf: ::settings.showTagButton --&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/op-box&gt;
   &lt;/div&gt;
</code></pre>

<p>The Problem with this is that Protractor takes up to 30/35 seconds to click on it, these is a grid with 30 elements paginated, but it only takes at most 1/3 seconds to render all 30 elements (to have the element completely seen and clickable) (I've been following the test running and attempted to click on it)... So I was wondering, what can I do speed up the click action? why could be the reason that protractor takes so long? it only does it with this particular section.
Maybe, I can use another strategy to click on it! (?) I tried several ways to. I had declared the element as this</p>

<pre><code> this.libraryBoxImage = element.all(by.css('.box-media-wrapper'));
</code></pre>

<p>and when I try to click on it I do:</p>

<pre><code> this.When(/^user selects item number "([^"]*)"$/, function(position, done) {
            browser.wait(EC.invisibilityOf(loginPage.spin));
            browser.wait(EC.visibilityOf(basePage.mediaLibrary)).then(function() {
                libraryPage.libraryBoxImage.get(position).click().then(function() {
                    done();
                });
            });
        });
</code></pre>