reactjs - How to stop react material table loader whent it's need

Question

I want to stop material table loader when custom error message shows. here is my material table component. and also i need to know how to create custom error message just like toaster when the condition is false. here is my attempt. please let me know if there is anyway to do this. because I'm totally beginner to material table.

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

const Table = ({columns, data, setData, required}) => {
    const [isLoading, setIsLoading] = useState(false);
    const [tableError, setTablesError] = useState({});

    useEffect(() => {
        //showing error message
      },
      [tableError]
    );

    return (
        <MaterialTable
        columns={columns}
        data={data}
        icons={tableIcons}
        options={{
          showTitle:false,
          search:false, 
          paging:false,
          actionsColumnIndex:4,
          addRowPosition:'first',
        }}
        editable={{
          onRowAdd: newData => 
            new Promise((resolve, reject) => {
              let error = [];
              if(required.length > 0){
                var result = Object.keys(newData).map((key) => [key, newData[key]]);
                required.forEach(function(value){
                if(!result.some(row => row.includes(value))){
                    error.push(value)
                  };
                })
              }
              if(error.length > 0){
                setTablesError({error:'1', columns:error, msg:'validation'});
              }else{
                setTablesError({error:'0', columns:'', msg:''});
                setTimeout(() => {
                  setData([...data, newData]);
                  resolve();
                }, 1000)
              }
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                const dataUpdate = [...data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setData([...dataUpdate]);
                resolve();
              }, 1000)
            }),
          onRowDelete: oldData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                const dataDelete = [...data];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                setData([...dataDelete]);
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }

export default Table;

Thanks is advance!

question from:https://stackoverflow.com/questions/65912620/how-to-stop-react-material-table-loader-whent-its-need

Answer 1

This is the promise call, if you want to stop loader call resolve() function. It will resolve the promise call and loader will stop.