How to add a loader for slow network in React

I’ve created a subscription page and on submitting the page doesn’t redirect like it is supposed to for people with slow network. Is there a way I can put a loader on the submit button to fix that because it ruins the user experience a little. This is how my submit function looks like.

const handleOnSubmit = (e) => {
    e.preventDefault();
    var body = {
      data: {
        name: name,
        email: email,
        contact_number: phone,
        organization: organization,
        designation: designation,
      },
    };

    // Send mailchimp data to lambda
    body = {
      data: {
        ...body.data,
        mailchimp: {
          email_address: email,
          status: newsletter ? "subscribed" : "unsubscribed",
          merge_fields: {
            FNAME: name,
            PHONE: phone,
            MMERGE6: organization,
            JOBTYPE: designation,
            SIGNUPSOUR: Book.fields.contentpieceId,
          },
        },
      },
    };
    setShowModal(false);
    if (window) {
      window.localStorage.setItem("@landing:sub-emai", email);
    }

    console.log(body);

    if (!isDanger) {
      axios
        .post(
          "{API}/prod/api",
          body
        )
        .then((resp) => {
          if (resp.status === 200) {
            window.location.href = `/case-study/${eBook.fields.redirectUrl}`;
          } else {
            setError(true);
          }
        });
    }
  };

Answer

I provide an example based on your data that might help you. I created state loading with default value false. While you are fetching data you set loading to true, after it finished set loading to false. If loading sets to true it shows spinner to you.

import React, {useState} from 'react';
import axios from "axios";

export default function MyComponent() {
    const [loading, setIsLoading] = useState(false);

    const handleOnSubmit = (e) => {
        e.preventDefault();
        setIsLoading(true) // data is fetching

        // do your job with axios

        axios.post("{API}/prod/api", "body")
            .then((resp) => {
                if (resp.status === 200) {
                    window.location.href = `/case-study/blw`;
                }
            })
            .catch((e) => console.log(e))
            .finally(function () {
                setIsLoading(false);
            })
    }

    return(
        <div>
            {loading && < Spinner/>}
            <div>
                <button type="submit" name="action">Submit</button>
            </div>
        </div>
    )
}