How to test a flicker div in AngularJS using protractor

Question

By saying "flicker div", I mean a div shows some seconds and then disappears, like a loading overlay. Given a real example, I'm working on the E2E test for a simple demo login page http://pinkyjie.com/generator-aio-angular/#/login, here is the scenario:

When user accesses this page for the first time, there is a loading overlay on the top of the login form. (The show/hide of this overlay element is controllered by ng-if)

I want to use protractor to test this:

function waitForElement (element) {
    browser.wait(function () {
        return browser.isElementPresent(element);
    }, browser.params.timeout);
}

it('should display the loading view for login', function () {
    // try 1: explicitly wait
    waitForElement(by.css('.login-checking'));
    // result 1: Error: Wait timed out after 10024ms

    // try 2: not wait
    expect(element.by.css('.login-checking').isPresent()).toBe(true);
    // result 2: Expected false to be true.
});

See the comment for the result error of protractor.

How to test this kind of flicker div?