function App() {
  return (
    <Suspense fallback={<p>Suspended</p>}>
      <MyComponent />
    </Suspense>
  );
}

function MyComponent() {
  const [items, setItems] = useState(() =>
    ['alice', 'bob', 'carol'].map(name => ({ id: crypto.randomUUID(), name })),
  );
  return (
    <ul>
      <AnimatePresence>
        {items.map(item => (
          <motion.li
            key={item.id}
            initial={{ x: 100 }}
            animate={{ x: 0 }}
            exit={{ x: -100 }}
          >
            {item.name}
            <button onClick={() => setItems(items.filter(i => i !== item))}>
              x
            </button>
          </motion.li>
        ))}
      </AnimatePresence>
      <button
        onClick={() => {
          /* do something that causes MyComponent to suspend */
        }}
      >
        Suspend
      </button>
    </ul>
  );
}