CODEWITHSUNDEEP
reactjsreact-router
Chris
Chris

Reputation: 6611

Is there any way add a global spinner in React?

We are using React and React-Router to develop a front end UI. In some of our pages, we will display a spinner. In our current solution, we have to add a Spinner component to every page, and then display it as needed.

Is there any way we can add a global Spinner in every page and call a method to display or hide it?

I think the Mixins maybe the solution, but I am not sure the correct way to do it.

Upvotes: 2

Views: 1923

Answers (1)

François Richard
François Richard

Reputation: 7045

I would keep the spinner ressource link in a conf file, render all my components passing the url through props.

So when I decide to change the spinner for another one I'll just have to change the link in the conf file.

mixin could work but I'm not sure this is the best thing to share just a prop

Edit: var conf = require("myconfmodule");

Inside you parent components render function:

render: function() {
    <SomeComponent spinnerUrl={conf.spinnerUrl} />
}

Inside your child component:

  getInitialState: function() {
        return { isLoaded : false; };
    }
    render: function() {
        { !this.state.isLoaded ?
            <img src={this.props.spinnerUrl} />
        : <LoadThePage/>}
    }

    componentDidMount: function() {
        // some listener, is my page load ? then this.setState({
        // isLoaded: true });
    }

I was thinking about something like that, let me know if it's clearer.

Upvotes: 1

Related Questions