Selenium wait for element to appear and dissapear
<p>I have the following element:</p>

<pre><code>&lt;div class="ui-helper-hidden" id="shell.indicator.busy"&gt;
  &lt;label&gt;Processing...&lt;/label&gt;
  &lt;br /&gt;
  &lt;img src="/RightCrowd/Images/loading.gif" alt="" /&gt;
&lt;/div&gt;
</code></pre>

<p>And it appears like this:</p>

<p><a href="https://i.stack.imgur.com/znsQY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/znsQY.jpg" alt="Processing"></a></p>

<p>I would like to wait for it to appear and then to disappear and continue with accessing elements. This appears on most pages of the web application. We've tried a few things but sometimes it is visible by Selenium and sometimes is not, although I can see it with my eyes. </p>

<p>I believe that this processing image appears on top of the current page and using the current handler may be useless. Not sure.</p>

<p>We've tried something like this:</p>

<pre><code>        WebElement element = (new WebDriverWait(webDriver, 10))
                   .until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//img[contains(@src,'/Images/loading.gif')]")));

        boolean processingEnd = (new WebDriverWait(webDriver, timeoutWaitForProgressbar))
                   .until(ExpectedConditions.invisibilityOfElementLocated(By.id("shell.indicator.busy")));
</code></pre>

<p>So we've tried both xpath and id... Please let me know what's the best way to handle this situation.</p>