3

Changing page on websites like Facebook will trigger browser's loading indicator although they might be not full page reload sometimes. How to achieve the similar behavior using React?

user793789
  • 196
  • 1
  • 13
  • 2
    It's not answer about solution on React, but it explain how it work/ed on Facebook - https://stackoverflow.com/questions/9882820/browser-busy-indicator-when-loading-data – chuve Aug 31 '17 at 07:14
  • 1
    You should use trick with `iframe` like @chuve suggested. Also more info can be found here: https://stackoverflow.com/questions/1918218/how-to-have-ajax-trigger-the-browsers-loading-indicator – yivo Aug 31 '17 at 08:49
  • 1
    The same trick is used in vk.com about many years (top russian social network) – yivo Aug 31 '17 at 08:50

1 Answers1

-1

If you are using react-router you can handle route change in client side itself. You can create an HOC to show the loading indicator while the route changes.

import React from 'react';
import Loader from './Loader';

function withRouteLoader(WrappedComponent) {
  class AppWithRouteLoader extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: false,
        loadedRoutes: props.location && [props.location.pathname],
      };
      this.updateIsLoading = this.updateIsLoading.bind(this);
    }

    componentWillMount() {
      this.unsubscribeHistory = this.props.router && this.props.router.listenBefore((location) => {
        if (this.state.loadedRoutes.indexOf(location.pathname) === -1) {
          this.updateIsLoading(true);
        }
      });
    }

    componentWillUpdate(newProps, newState) {
      const { loadedRoutes } = this.state;
      const { pathname } = newProps.location;

      if (loadedRoutes.indexOf(pathname) === -1 && newState.isLoading  === true) {
        this.updateIsLoading(false);
        this.setState({
          loadedRoutes: loadedRoutes.concat([pathname]),
        });
      }
    }

    componentWillUnmount() {
      this.unsubscribeHistory = undefined;
    }

    updateIsLoading(isLoading) {
      this.setState({ isLoading });
    }

    render() {
      return (
        <div>
          <Loader show={this.state.isLoading} />
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  }

  AppWithRouteLoader.propTypes = {
    location: React.PropTypes.object,
    router: React.PropTypes.object,
  };

  return AppWithRouteLoader;
}

export default withRouteLoader;

you can refer to this Boilterplate https://github.com/react-boilerplate/react-boilerplate. It has the whole thing implemented

sabarnix
  • 715
  • 4
  • 5
  • 1
    Author asks how to trigger browser loading indicator but not how to create custom loading indicator via HTML. – yivo Aug 31 '17 at 08:45
  • 1
    In the loader component you can put an iframe and trigger its reload. It will make the browser show the loading indicator – sabarnix Aug 31 '17 at 08:50