react-admin Use framer-motion for SimpleFormIterator

Following https://github.com/marmelab/react-admin/pull/7426.

Use framer-motion to handle reorder animations. It also enables a drag feature.

Mar 24 '22 16:03 alanpoulain

Framer-motion is 138kb, it seems very expensive for animating 1 component

https://bundlephobia.com/package/[email protected]

Mar 28 '22 14:03 fzaninotto

There are some considerations in this page to take into account. Have you another idea for a component handling this animation? Or do you want to give up the idea of animating it?

Mar 28 '22 15:03 alanpoulain

It's be interesting to see how much weights it adds to a real app. Can you check on the simple example with cd examples/simple && yarn build?

Mar 29 '22 13:03 fzaninotto

With framer-motion:

Without framer-motion:

It seems it does add at least 100Kb.

Mar 29 '22 14:03 alanpoulain

that's too much for a single use

Mar 29 '22 14:03 fzaninotto

What about react-dnd or react-smooth-dnd? They are about a third-fourth the size. And I do think dnd would be a very nice feature to have for SimpleFormIterator, or a nice incentive to shell out for enterprise ReferenceManyInput. Maybe potentially editable datagrid, ReferenceArrayInput, or DualListInput.

Feb 07 '23 19:02 CiberNin

That will be easier to do in userland with v5 so let's close this

Dec 22 '23 08:12 djhi