How to add a loading indicator on every Relay.js network request

Question

I'm currently building a Relay/React web app. It's been amazingly simple with one exception. I've not been able to figure out how I can get a global notification when any of my components are making network requests. I'm hopping to add a spinner to the top of my app when ever there's network activity, because some of my mutations take a long time to load.

This was my attempt at solving this problem, but it only works on new route page loads.

function renderer(info)
{
    let {props, error, element} = info;
    if (error) {
        return (<ServerError errors={error}/>);
    } else {
        if (props) {
            return React.cloneElement(element, props);
        } else {
            return (<Loading />);
        }
    }
}


ReactDOM.render(
    <Router
        history={browserHistory}
        render={applyRouterMiddleware(useRelay)}
        environment={Relay.Store}
    >
        <Route
            path="/"
            queries={ViewerQuery}
            component={App}
        >
            <IndexRoute
                queries={ViewerQuery}
                component={Libraries}
                render={renderer}
            />
        <Route path="*" component={Error}/>

    </Route>
</Router>

Ideally I could get some callback that I can pass to my App component, which renders all my pages headers and footers. Any help with this would be greatly appreciated. I've been all over the internet for a while trying to find a good solution to this.

Answer 1

I ended up extending Relay's default network layer so that I could make some Flux events that my main root component listens to. This allows me to have all my loading and error message handling in one place if I so desire.

Here's my final solution. Not sure that it's the cleanest it could be, but it works quite well.

import Relay from "react-relay";
import RelayMutationRequest from "react-relay/lib/RelayMutationRequest";
import AppDispatcher from "./AppDispatcher";

export default class CustomNetworkLayer extends Relay.DefaultNetworkLayer {

    constructor(uri, init)
    {
        super(uri, init);
    }

    networkLoadingEvent()
    {
        AppDispatcher.dispatch({
            actionType: 'LOADING'
        });
    }

    networkDoneLoadingEvent()
    {
        AppDispatcher.dispatch({
            actionType: 'DONE_LOADING'
        });
    }

    networkErrorEvent(error)
    {
        AppDispatcher.dispatch({
            actionType: 'ERROR',
            payload: error
        });
    }

    sendQueries(requests)
    {
        this.networkLoadingEvent();
        return Promise.all(requests.map(request => (
            this._sendQuery(request).then(
                result => result.json()
            ).then(payload =>
            {
                if (payload.hasOwnProperty('errors')) {
                    const error = CustomNetworkLayer.createRequestError(request, '200', payload);
                    this.networkErrorEvent(payload.errors[0].message);
                    request.reject(error);
                } else {
                    if (!payload.hasOwnProperty('data')) {
                        const error = new Error(
                            'Server response was missing for query ' +
                            `\`${request.getDebugName()}\`.`
                        );
                        this.networkErrorEvent(error);
                        request.reject(error);
                    } else {
                        this.networkDoneLoadingEvent();
                        request.resolve({response: payload.data});
                    }
                }
            }).catch(
                error =>
                {
                    this.networkErrorEvent(error);
                    request.reject(error)
                }
            )
        )));
    }

    sendMutation(request)
    {
        this.networkLoadingEvent();
        return this._sendMutation(request).then(
            result => result.json()
        ).then(payload =>
        {
            if (payload.hasOwnProperty('errors')) {
                const error = CustomNetworkLayer.createRequestError(request, '200', payload);
                this.networkErrorEvent(payload.errors[0].message);
                request.reject(error);
            } else {
                this.networkDoneLoadingEvent();
                request.resolve({response: payload.data});
            }
        }).catch(
            error =>
            {
                this.networkErrorEvent(error);
                request.reject(error)
            }
        );
    }


    /**
     * Formats an error response from GraphQL server request.
     */
    static formatRequestErrors(request, errors)
    {
        const CONTEXT_BEFORE = 20;
        const CONTEXT_LENGTH = 60;

        const queryLines = request.getQueryString().split('\n');
        return errors.map(({locations, message}, ii) =>
        {
            const prefix = (ii + 1) + '. ';
            const indent = ' '.repeat(prefix.length);

            //custom errors thrown in graphql-server may not have locations
            const locationMessage = locations ?
                ('\n' + locations.map(({column, line}) =>
                {
                    const queryLine = queryLines[line - 1];
                    const offset = Math.min(column - 1, CONTEXT_BEFORE);
                    return [
                        queryLine.substr(column - 1 - offset, CONTEXT_LENGTH),
                        ' '.repeat(Math.max(0, offset)) + '^^^',
                    ].map(messageLine => indent + messageLine).join('\n');
                }).join('\n')) :
                '';

            return prefix + message + locationMessage;

        }).join('\n');
    }

    static createRequestError(request, responseStatus, payload)
    {
        const requestType =
            request instanceof RelayMutationRequest ? 'mutation' : 'query';
        const errorReason = typeof payload === 'object' ?
            CustomNetworkLayer.formatRequestErrors(request, payload.errors) :
            `Server response had an error status: ${responseStatus}`;
        const error = new Error(
            `Server request for ${requestType} \`${request.getDebugName()}\` ` +
            `failed for the following reasons:\n\n${errorReason}`
        );
        error.source = payload;
        error.status = responseStatus;
        return error;
    }
}

then in my index.js file I do this:

Relay.injectNetworkLayer(new CustomNetworkLayer("/graphql",
    {
        fetchTimeout: 35000, // timeout after 35 seconds
        retryDelays: [2000] // retry after 2 seconds
    }));

quick note: AppDispatcher is just a flux js dispatcher, and I'm listening to those events in my main wrapper component.

hope this helps someone else out. I certainly spent too much time on this.

Also thank you to everyone who helped me come to this solution.

Answer 2

You could also try adding a custom Relay Network Layer that renders the loading indicator component on every request. I think the main concern to take into account for the "global" loading indicator is about design not only of the indicator but also about its impact on the UI globally. Is it going to block the UI?, just one part of it?, will it displace the other elements up/down?, etc.

In the meantime, you can do something like:

  handleSubmit(event) {
    event.preventDefault();
    this.setState({isLoading: true});

    this.props.relay.commitUpdate(
      new LoginMutation({
        email: this.refs.email.value,
        password: this.refs.password.value
      }), {
        onSuccess: response => {
          Auth.login(response.login.accessToken);
          const { location, router } = this.props;

          if (location.state && location.state.nextPathname) {
            router.replace(location.state.nextPathname)
          } else {
            router.replace('/')
          }
        },
        onFailure: transaction => {
          this.setState({hasError: true});
          this.setState({isLoading: false});
        }
      }
    );
  }

The above is snippet is taken from here. You can see the rest of the logic in that repo.

Answer 3

You can create a custom spinner component in react and based on your data load status you can either show or hide the spinner.

An example for this can be -

Your Spinner component could be like this -

    let SpinMe
    = (
        <div className="spinner-container">
            <div className="loader">
                <svg className="circular">
                    <circle className     = "path"
                        cx                = "50"
                        cy                = "50"
                        r                 = "20"
                        fill              = "none"
                        strokeWidth      = "3"
                        strokeMiterLimit = "10"
                    />
                </svg>
            </div>
        </div>
    );

This spinner component should have somewhat higher z-index than other component so that while loading is occurring user can not click other components or interact with other components.

Also in styling show some transparent dark background of spinner.

e.g

.spinner-container {

    position         : absolute;
    background-color : rgba(12, 12, 12, 0.61);
    width            : 100%;
    min-height       : 100%;
    background-size  : 100% 100%;
    text-align       : center;
    z-index          : 3;
    top              : 0;
    left             : 0;
}

Now Your another component where you want to use the spinner and in this component you want to make network request.

import React from 'react';

class SpinTestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        isLoading:false
    };
  }

  sendNetworkRequest(URL, dataToSend) {
      return $.ajax({
            type        : 'POST',
            url         : URL,
            data        : JSON.stringify(dataToSend),
            dataType    : 'json'
            });
  }

  componentDidMount() {
        const URL = "test url";
        const dataToSend = { param1:"val", param2:"val" };

        this.setState({isLoading:true});
        this.sendNetworkRequest(dataToSend)
            .then(
            () => {
                // success response now remove spinner
                this.setState({isLoading:false});
            },
            () => {

                // error response again remove spinner and 
                // show error message to end user
                this.setState({isLoading:false});
            });
    }

    render() {
        return (
                <div>
                { this.state.isLoading ? <SpinMe/> : null }
                    <div>
                        <h1>
                            Remaining Component structure 
                            or Jsx
                        </h1>
                        <p>
                            To be show after loading is done.
                        </p>
                    </div>
                </div>
               );
    }
}

export default SpinTestComponent;