title: How to wait until page loading image disappears in Protractor on non-Angular page
body: <p>On non-Angular site when I click on certain radio button, page loading gif appears. In Protractor test I want to wait until this loader gif disappears and then check for another element.</p>
  
  <p>HTML of the loader (which is ever present):</p>
  
  <pre><code>&lt;div class="loader" style="display: none;"&gt;
      &lt;div id="loader"&gt;
          &lt;img src="/img/loading.gif"&gt;
      &lt;/div&gt;
      &lt;div class="totalMaskForLoader"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I have done in test:</p>
  
  <pre><code>        ...
          //  click on balance dropdown
          page.sortByBalanceSelector.click();
  
          browser.wait(function() {
                      // return a boolean here. Wait for spinner to be gone.
                      return !browser.isElementPresent(by.css(".loader"));
                  }, 20000);
  
          // compare to the starting player's username
          expect(page.hasText(page.usernameCellButton)).not.toContain(startingUsername);
  </code></pre>
  
  <p>The problem is that I always get </p>
  
  <blockquote>
    <p>Wait timed out after 20009ms</p>
  </blockquote>
  
  <p>How can I wait for loader gif to disappear?</p>