django 66 react loading spin

Migrated to cloud, request response time is longer, display loading status with spin

logging in

fetching albums

adding item to cart

added item to cart

updating cart

cart updated

deleting item in cart

item deleted

checking out cart

receipt

fetching order history

order history fetched

fetching order detail

detail fetched

registering user

user registered

changing password

password changed

resetting password

password reset email is sent

password reset email received

chuanshuo updating album

album updated

nick deleting album

permission denied

//react/pages/orderhistory

import React, { Component } from 'react';
import '../App.css';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { getOrderHistory } from '../redux/actions/getOrderHistory';
import { message, Collapse, Spin } from 'antd';
import OrderCollapse from '../partials/orderCollapse';

class OrderHistory extends Component {
    constructor(props) {
        super(props);

        this.state = {
            spin: false,
            spinTip: '',
        };
    }

    componentDidMount() {
        //start fetching database once logged in
        if (this.props.loggedin) {
            if (!this.props.gotOrders) {
                this.props.dispatch(getOrderHistory(this.props.token));
            }

            //wait for 10sec, check every 0.1s to see if orders are fetched
            let i = 0;
            this.setState({ spin: true, spinTip: 'Fetching Orders...' })
            const waitOrders = setInterval(() => {
                if (this.props.gotOrders) {

                    clearInterval(waitOrders);
                    this.setState({ spin: false })
                }
                if (i == 100) {
                    message.error('fetching order history timed out.')
                    clearInterval(waitOrders);
                    this.setState({ spin: false })
                }
                i++;
            }, 100)
        }
    }

    render() {
        if (!this.props.loggedin) {
            return <Redirect to='/login' />
        }

        return (
            <div style={{ padding: '10px', marginTop: '10px' }}>
                <legend>Order History</legend>
                {this.state.spin ? <Spin tip={this.state.spinTip} style={{ width: '100%', textAlign: 'center' }}></Spin> : null}
                <hr />

                {this.props.gotOrders ?
                    this.props.orders.sort((a, b) => { return new Date(b.date) - new Date(a.date) })
                        .map((order, index) => {
                            return <OrderCollapse header={order.date.toString()} extra={order.total.toString()}
                                orderid={order.id} key={index} />
                        })
                    : null}

            </div>
        );
    }
}

export default connect(
    (store) => {
        return {
            loggedin: store.login.fetched,
            token: store.login.token,
            gotOrders: store.orderHistory.fetched,
            orders: store.orderHistory.orders,
        };
    }
)(OrderHistory);

------------------------------
//react/pages/resetPassword

import React, { Component } from 'react';
import '../App.css';
import { resetPassword } from '../redux/actions/resetPassword';
import { connect } from 'react-redux';
import { Input, Spin } from 'antd';
import { Button } from 'reactstrap';
import { MdEmail } from "react-icons/md";

class ResetPassword extends Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
        };
    }

    inputChange = (e, p) => {
        this.setState({ [p]: e.target.value });
    }

    formSubmit = (e) => {
        e.preventDefault();

        const formData = new FormData();
        formData.set('email', this.state.email);

        this.props.dispatch(resetPassword(formData));
    }

    render() {
        return (
            <form style={{ marginLeft: '10px', width: '300px' }}
                onSubmit={(e) => this.formSubmit(e)}>
                <legend>Reset Password</legend>
                {this.props.sending ? <Spin tip='Reseting Password...' style={{ width: '100%', textAlign: 'center' }}></Spin> : null}
                <hr />
                <p style={{ color: 'red' }}>{this.props.error}</p>
                {this.props.sent ? <p style={{ color: 'green' }}>Password reset email has been sent to {this.state.email}</p> : null}
                <Input placeholder="email" required='required' type='email'
                    prefix={<MdEmail style={{ color: 'rgba(0,0,0,.25)' }} />}
                    onChange={(e) => this.inputChange(e, 'email')}
                    style={{ marginTop: '5px' }}
                />
                <Button color="success" type='submit' size='sm'
                    style={{ marginTop: '15px' }}
                >Submit</Button>
            </form>
        );
    }
}

export default connect(
    (store) => {
        return {
            sent: store.login.sent,
            sending: store.login.sending,
            error: store.login.error
        };
    }
)(ResetPassword);

reference:
https://ant.design/components/spin/