how to display loading animation image while inline vf page is loading?

Question

i am having two inline visualforce pages that has been embedded in account detail page. The data for the inline vf pages are coming from a webservice. Since it is a webservice call it takes few seconds for the page to show the data. it means the vf pages section SAP and Open Documents displays blank white space as show in the screen shot while loading account detail page. Please note the first screen shot taken at the time of account detail page loading shows blank white space.

what i want is to display a loading image in the white space until the data comes for the page from the service. attached is the screen shot showing the issue...

More Comments: if you see the screen shot 2, "Open Documents" is an inline vf page which by default should display results of Open Quotation on account detail page button.. User may click other buttons to see other details once it has been loaded. Will VF remoting suitable for write or refreshing a DOM like pageblocktable?

Answer 1

Are your webservice calls being invoked asynchronously (via VF Remoting) or are they part of the page load (action method on the <apex:page>)?

If they are being invoked via Visualforce Remoting, you can have a loading image immediately display on the screen and a callback for your VF Remote method that removes the image.

If you are using the action method on the <apex:page> tag, you'll likely want to switch to VF remoting so your page load isn't held up waiting for the callout to complete.

Update: I added some sample code below based on the link above to show how something like this might work. It isn't "working" code, but more along the lines of psuedocode.

Sample VF Page

<apex:page controller="TestController">
  <img id="loading-image" src="/myImage.png"></img>
  <div id="my-data"></div>

  <script type="text/javascript">
    var j$ = jQuery.noConflict();    

    function getRemoteAccount() {
        // This remoting call will use the page's timeout value
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.TestController.getCalloutInfo}',
            handleResult
        );
    }

    function handleResult(result, event) {
      // TODO - update the UI
      j$('#my-data').html(result);

      // Hide the loading image
      j$('#loading-image').hide();
    }
  </script>
</apex:page>

Sample Apex Class

public with sharing TestController {
  @RemoteAction
  global static String getCalloutInfo()
  {
    // TODO - make callout

    // return value to UI
    return '{"label":"mock-data"}';
  } 
}