Protractor forces me to use browser.wait() even with async / await

I'm getting into Protractor with native async / await. I don't understand why, in the following code, the line marked FOO passes, and why I have to do a browser.wait() before the line marked BAR will pass.

  it('choose to login with email', async function() {
    var loginButton = element(by.css('button'));
    var loginHeading = element(by.css('h3'));

    await loginButton.click();

    expect(await loginHeading.isPresent()).toBe(false); // FOO 
    await browser.wait(ec.visibilityOf(loginHeading), 1000, "Didn't load login header");
    expect(await loginHeading.isPresent()).toBe(true); // BAR
  });

I was under the impression that with async / await:

browser.driver.wait() could be leveraged, but in Protractor this functions is almost always unnecessary and can be avoided.

and

Because Protractor is integrated in the Angular page state, it knows how to wait for the modal to appear before attempting to grab its text. No sleep or wait functions are needed.

(from here).

The HTML for the button is very simple:

<button _ngcontent-c4="" class="btn btn-link" tabindex="0" ng-reflect-router-link="/account/login">
    Login with email
</button>

and /account/login is currently a simple component with an h3, and a form.

Is the browser.wait() reasonable and necessary here, and if so, why might that be? I'm happy to provide more information as necessary.