在 API 调用“POST”上设置加载程序

Question

When a user fills in the input fields and submits a POST method is run.. I would like to show the user that something is happening. A loader, or spinner, or text just that they do not wait guessing something is happening.

I have a solution to that and it works. My challenge is only displaying the Loader/Spinner/LoadingText when the <input/> fields are not empty and secondly. I would like the spinner to be false when it gets a response from the API .

How can I do that ?

Below I have my solution:

const [spinner, setSpinner] = useState(false);

const handleSubmit = async () => {
setSpinner(true);

if (!formRef.current?.reportValidity()) {
  return;
}
// You'll probably want to invalidate this token and create a new one
const token = process.env.React_App_Sandbox_Api;
const data = {
  transactionReference: "string",
  paymentMethod: "CreditCard",
  checkoutOrderUrl: "http://localhost:3000/transaction",
  user: {
    name,
    msisdn: phone,
    email: email,
  },
  payementMethodDetail: {
    RedirectUrl: "http://localhost:3000/transaction",
    PurchaseEventWebhookUrl: "http://www.test.com",
  },

  bundle: cart.map((item) => ({
    ProductCode: `${item.ProductCode}`,
    Amount: item.amount,
    CurrencyCode: item.currencyCode,
    Quantity: item.quantity,
  })),
};
const requestOptions = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  },
  body: JSON.stringify(data),
};
try {
  const res = await fetch("https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
  requestOptions
);
if (!res.ok) {
  // some basic handling to come here
return;
}
  setResponse(await res.json());
  navigate("/payment");
} 
finally {
setSpinner(false);
}

return (
  <>
    <form>
      {/* some input fields logic are here */}
    </form>  
    {spinner && <p>something is loading</p>}
    <button type="submit" onClick={handleSubmit}>Submit</button> 
  </> 
);

Answer 1

First of all, For handling form data (such as validation), I suggest to use library like react-hook-form. Otherwise you can check input's value if it's empty then return false and setError. if there is no error, call the API. When response received, set spinner false.

if (input empty condition) {
setError('fill input');
return false;
}
setSpinner(true);
try {
 // API call
setSpinner(false);
} catch (error) {
setSpinner(false);
setError(error);
}