How to disable optimistic UI updates in react-admin?

Question

Is it possible to disable optimistic UI in react-admin or is it configurable at runtime?

Anthropology

Answer 1

Disable undoable property in Edit component:

<Edit undoable={false} title={<EditTitle />} actions={<EditActions />} {...props}>

Interracial

is there a way to set undoable={false} for all forms globally? Thanks – Podgorica

create your own component based on Edit component and set undoable property to false by default – Interracial

yeah I thought of that I would expect that I could just pass undoable={false} in <Admin> – Podgorica

if you want to have your undoable always to be false, create an Edit component with the undoable props set to false, and instead of importing the Edit component from react-admin all the time, you import your newly created Edit component. – Companionable

I want to turn optimized rendering off for a Show page too, but passing undoable={false} does not work. – Roark

Answer 2

As you know undoable cannot be set on Create component. Here is a way to handle optimistic rendering if your props are different from the Create page rather than disabling it.

This is an example of handling optimistic rendering on <Show/>:

const ItemShow = (props) => {
  const record = props;
  return (
    <Show
      {...props}
    >
      <ItemCreatedScreen />
    </Show>
  );
};

const ItemCreatedScreen = ({ record }) => {
  if (record.isFromCreatePage) {
    return <Loading />;
  } else {
    return <ItemView record={record} />;
  }
};

The custom prop isFromCreatePage from the form of the Create component should help you decide if the prop is indeed from the Create page.

Optimistic Rendering will send the request to the API after a few seconds, meanwhile, the UI can show the <Loading/> sign, which is for a very short duration I might add. After which the request fetches the data from the server and this can be passed on to the <ItemView/> page.

Hefter