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?

Aigars Matulis · Accepted Answer · 2018-08-20T06:36:53.120

14

Disable undoable property in Edit component:

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

edited Aug 20 '18 at 06:36

answered Jun 18 '18 at 16:51

Aigars Matulis

1,469
17
22

2

is there a way to set `undoable={false}` for all forms globally? Thanks – Michail Michailidis Sep 07 '18 at 11:54
1

create your own component based on Edit component and set undoable property to false by default – Aigars Matulis Sep 07 '18 at 15:31
yeah I thought of that I would expect that I could just pass undoable={false} in – Michail Michailidis Sep 07 '18 at 21:04
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. – François Alexandre COLOMBANI Feb 26 '19 at 15:16
I want to turn optimized rendering off for a Show page too, but passing `undoable={false}` does not work. – tjgragg Apr 25 '19 at 18:49

score 0 · Answer 2 · answered May 28 '20 at 08:00

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.

How to disable optimistic UI updates in react-admin?

2 Answers2