BottomSheet: fix jumpy animation

src/material/BottomSheet.tsx

@@ -1,11 +1,15 @@
 import {
+  children,
   createEffect,
   createRenderEffect,
+  createSignal,
   onCleanup,
   onMount,
   startTransition,
   useTransition,
+  type ChildrenReturn,
   type ParentComponent,
+  type ResolvedChildren,
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
@@ -40,17 +44,21 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
   let animation: Animation | undefined;
   const hero = useHeroSignal(HERO);
+  const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
+  const ochildren = children(() => props.children);
 
-  const [pending] = useTransition()
+  const [pending] = useTransition();
 
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
         animatedOpen();
+        setCache(ochildren());
       }
     } else {
       if (element.open) {
         animatedClose();
+        setCache(undefined);
       }
     }
   });
@@ -115,7 +123,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog class={styles.bottomSheet} ref={element!}>
-      {props.children}
+      {ochildren() ?? cache()}
     </dialog>
   );
 };