I'm trying to implement a spinner for a visualforce page where the controller call an external service, receives a blob and visualforce displays an iframe using the blob to display a PDF without saving the file in Salesforce.

The problem is that the spinner is being displayed only when the controller receives a callback and I need it to display before the service returns the blob.

Is there a way to show the spinner while the external service is called on the controller?

My controller and vsf without spinner :

    public Id productId{get; set;}
    public static String manipulateString{get;set;}

    public fichaController(ApexPages.StandardController controller){

        productId = ApexPages.currentPage().getParameters().get('id');
        product = [SELECT ProductCode 
                   FROM Product2 
                   WHERE id =: productId];
        HttpResponse response = new HttpResponse();
        response = postProduct(product.productCode);
        returnMessage = getReturn(response);
        base64String = response.getBody();
        manipulateString = base64String.removeEnd('"');
        manipulateString = manipulateString.removeStart('"');
    public static HttpResponse postProduct(String produtoId) {
    public static String getReturn(HttpResponse httpResponse){


<apex:page standardController="Product2" extensions="fichaController" lightningStylesheets="true">   
    <div class="slds-scope">
        <apex:form id="form" style="height: 200px;">
            <apex:tabPanel >
                <apex:tab label="Ficha Técnica" name="Ficha" id="Ficha" rendered="true">
<iframe width = "100%" height = "800" scrolling = "true" marginheight = "100%" marginwidth = "100%"
                        src = "data:application/pdf;base64,{!manipulateString}">    
  • Change your logic from constructor to either Remote Action, or Action Function and then you can show and hide spinner as per demand Nov 25 '20 at 17:48

As commented above, for eg (With Remote Action):

Page :

<apex:page id="HelloWord" controller="DeleteAllBigObject">
    <apex:slds />
        function RemoteActionToDeleteBigObject(){
                    function(strResult, objEvent){
                        //event.status determines if there is error or not
                    {buffer: false, escape: false, timeout: 120000}

    <button onclick="RemoteActionToDeleteBigObject()">Trigger Deletion of Big Object</button>
    <div class="slds-spinner_container slds-is-fixed slds-hide" id="sldsSpinner">
        <div role="status" class="slds-spinner slds-spinner_medium">
            <span class="slds-assistive-text">Loading</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>

DeleteAllBigObject class as:

global class DeleteAllBigObject {

    global static Boolean deleteAllBigObject(){
        // something to keep the thread busy, in your case do you SOQL and callout here
        for (Integer i = 0; i < 100000; i++) {
        return true;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.