I'm writing an automated test case for a web page. Here's my scenario. I have to click and type on various web elements in an html form. But, sometimes while typing on a text field, an ajax loading image appears , fogging all elements i want to interact with. So, I'm using web-driver wait before clicking on the actual elements like below,

WebdriverWait innerwait=new WebDriverWait(driver,30);
innerwait.until(ExpectedConditions.elementToBeClickable(By.xpath(fieldID)));
driver.findelement(By.xpath(fieldID)).click();

But the wait function returns the element even if it is fogged by another image and is not clickable. But the click() throws an exception as

Element is not clickable at point (586.5, 278).
Other element would receive the click: <div>Loading image</div>

Do I have to check every time if the loading image appeared before interacting with any elements?.(I can't predict when the loading image will appear and fog all elements.) Is there any efficient way to handle this? Currently I'm using the following function to wait till the loading image disappears,

public void wait_for_ajax_loading() throws Exception
{
    try{
    Thread.sleep(2000);
    if(selenium.isElementPresent("id=loadingPanel"))
    while(selenium.isElementPresent("id=loadingPanel")&&selenium.isVisible("id=loadingPanel"))//wait till the loading screen disappears
    {
         Thread.sleep(2000);
         System.out.println("Loading....");

    }}

    catch(Exception e){
        Logger.logPrint("Exception in wait_for_ajax_loading() "+e);
        Logger.failedReport(report, e);
        driver.quit();
        System.exit(0);
    }

}

But I don't know exactly when to call the above function, calling it at a wrong time will fail. Is there any efficient way to check if an element is actually clickable? or the loading image is present?

Thanks..