How to make sure that the element is not visible and proceed with the next conditions in protractor

I am testing an element that when a user selects a radiobutton, a loading image will appear in the middle, and will be invisible after a few seconds. When the loading image disappears, it should show the login screen and do all the other conditions. Below is my protractor code:

it('Displays the small login screen', function () {
    var loadpanel = element(by.id("loadingimage"));
    var el = loadpanel;
    browser.driver.wait(protractor.until.elementIsNotVisible(el));
    smallLogin = element(by.id('loginScreen'));
    browser.wait(EC.presenceOf(smallLogin), 30000);
    expect(smallLogin.isPresent()).toBe(true);
    element(by.id('dropdown')).click();

This doesn't work, but it passes. I want the loading image to be hidden and until it is visible, the small login condition should not be executed. What happens is that it executes the small login condition and the dropdown click as well, while the image is still visible. Thanks.