【React】LoadingButtonを一定秒数後に元に戻るようにカスタマイズ【MUI】

MUIのLoadingButtonを一定秒数後に元に戻るようにカスタマイズ

MUIのLoadingButtonを実装したところ、以下のような症状に遭遇しました。 ・ボタンを押下してから、時間がどれだけ経ってもLOADING状態になってボタンを再度押せない ・エラーが帰ってきても、LOADING状態になって、ボタンを再度押せない

以上の症状を解消するために、一定時間(今回は5秒)経ったら、Loading状態から復帰し、再度ボタンを押せるようにカスタマイズしていきます。

実装

カスタマイズはシンプル。 onClick時にloadingのstateをtrueに更新。5秒後にTimeoutが実行されloadingのstateがfalseに更新されます。

一応、onClickのファンクションやボタンラベルを渡したりできるようにする等のカスタマイズもしています。

LoadingButton.js

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';
import LoadingButton from '@mui/lab/LoadingButton';
import { COLORS } from "../style_constants";
import { styled } from '@mui/material/styles';

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

const CustomButton = styled(LoadingButton)({
  backgroundColor: COLORS.MAIN_COLOR,
  opacity: 0.9,
  "&:hover": {
    backgroundColor: COLORS.MAIN_COLOR,
    opacity: 1,
  },
});

export function SaveButton({ onClick, btnLabel }) {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);

  function handleClick() {
    setLoading(true);
    onClick();
    setTimeout(function () {
      setLoading(false);
    }.bind(this), 5000);
  }

  return (
    <div>
      <CustomButton
        size="large"
        variant="contained"
        color="primary"
        onClick={handleClick}
        loading={loading}
        loadingPosition="end"
        endIcon={<SaveIcon />}
        className={classes.button}
      >
        {btnLabel}
      </CustomButton>
    </div>
  )
}

こんな感じ。(色とか別カスタマイズを加えています)

参考