A global spinner component

[Amos]

Hi

I read here

https://ej2.syncfusion.com/react/documentation/spinner/getting-started/

but I couldn't understand how to really make the spinner global. I defined

export function generateSpinner() {
    createSpinner({
        target: document.getElementById('container')
    })
}

export function spinnerShow() {
    showSpinner(document.getElementById('container'));
}

export function spinnerHide() {
    hideSpinner(document.getElementById('container'));
}

in useEffects of the main.jsx I called generateSpinner, hoping it will be created once there and then I will be able to show/hide it using the other 2 methods. Nothing was showing.

I then called the 3 specific methods

createSpinner(document.getElementById("target"));
showSpinner(document.getElementById("target"));
hideSpinner(document.getElementById("target"));

inside the jsx file itself where I want it to show (I defined a component with id of target) but again, nothing was shown. What am I missing?

Thanks

Notice that my question is about a global spinner to show/hide throughout the app, the example of a specific file is just an example.

[Revanth Krishnan]

Hi Amos, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I read here https://ej2.syncfusion.com/react/documentation/spinner/getting-started/ but I couldn't understand how to make the spinner global.” 

 

As the spinner can be created and shown using the methods, the create and show method can be called whenever needed on the application’s page. The create method should be called only after the target element is rendered in the DOM. We have prepared a sample for your reference, 

 

Code Snippet: 

 

import { createSpinner, showSpinner, hideSpinner } from "@syncfusion/ej2-popups"; 

 

export class DefaultFunctionalities extends SampleBase { 

  hideClicked() { 

    hideSpinner(document.getElementById("targetElement")); 

  } 

 

  showClicked() { 

    showSpinner(document.getElementById("targetElement")); 

  } 

 

   

  componentDidMount() { 

    //createSpinner() method is used to create spinner 

    // The createSpinner is called in componentDidMount because the target element need to be DOM before creating the spinner. 

    createSpinner({ 

      // Specify the target for the spinner to show 

      target: document.getElementById("targetElement") 

    }); 

    // showSpinner() will make the spinner visible 

    showSpinner(document.getElementById("targetElement")); 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <button onClick={this.showClicked}>Show Spinner</button> 

        <button onClick={this.hideClicked}>Hide Spinner</button> 

        <div 

          id="targetElement" 

          className="control-section col-lg-12 spinner-target" 

        /> 

      </div> 

    ); 

  } 

} 

Note: Once the spinner is created it can be shown and hidden multiple times. 

 

Sample: https://stackblitz.com/edit/react-ze63nw-y98tgy?file=index.js 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth  

[Amos]

Thanks but this method shows how to show/hide it per page. I wonder if it's possible to make it global.

Meaning, create it on the first/main page using the "main container" of the app as the target (so the target exists in all pages (spa application)) and then show/hide it in all pages, when needed.

[Amos]

OK, I managed to create a global spinner by defining an id on the main div and then the 3 "players", see below.

I'm calling the creator on the main page's hooks (once) and on the relevant page I call spinnerShow and spinnerHide.

It works BUT if there is another component showing (a dialog for example), then the spinner is hidden behind it and it is not prevents the user from interacting with it.

I need a combination of z-index: 10000 (for example, so the spinner will be on top of everything) and a no-events indication so the user will need to wait for the spinner to hide before continuing to interact with the screen. Any idea?

export function spinnerCreator() {
    createSpinner({ target: document.getElementById("mainContainer")});
}

export function spinnerShow() {
    showSpinner(document.getElementById("mainContainer"));
}

export function spinnerHide() {
    hideSpinner(document.getElementById("mainContainer"));
}

[Revanth Krishnan]

Hi Amos, 

 

 

Greetings from Syncfusion support. 

 

 

We have further validated your query and the ‘z-index’ cannot be set directly to the spinner using the properties, the ‘z-index’ can be set when showing the spinner by setting the ‘zIndex’ style for the spinner element. 

 

Code Snippet: 

 

showClicked() { 

    showSpinner(document.getElementById("targetElement")); 

    document.getElementById("targetElement").querySelector(".e-spinner-pane").style.zIndex = "1000"; 

} 

Note: The ‘zIndex’ needs to be set to the spinner element depends on the current page append elements. 

 

Also, the spinner can be set with ‘label’ and the ‘cssClass’ property when the spinner is created, to prevent the user from interacting with the screen. We have modified the already shared sample for your reference, 

 

Code Snippet: 

 

createSpinner({ 

    // Specify the target for the spinner to show 

    target: document.getElementById("targetElement"), 

    // This text will be displayed below the spinner 

    label: "Please Wait", 

    // This will add the grey background for the spinner target element 

    cssClass: "e-spin-overlay" 

}); 

 

Sample: https://stackblitz.com/edit/react-ze63nw-q6nud2?file=index.js 

 

Please check the above code snippet and the sample and let us know if you need further assistance. 

 

Regards, 

Revanth 

[Amos]

Seems to work great!

Thanks!

[Revanth Krishnan]

Hi Amos, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfies your requirement. 

 

Regards, 

Revanth