feat(layout): disable transition when promoted attributes are shown by default

apps/client/src/widgets/react/Collapsible.css

@@ -17,7 +17,6 @@
     .collapsible-body {
         height: 0;
         overflow: hidden;
-        transition: height 250ms ease-in;
     }
 
     .collapsible-inner-body {
@@ -29,4 +28,10 @@
             transform: rotate(90deg);
         }
     }
+
+    &.with-transition {
+        .collapsible-body {
+            transition: height 250ms ease-in;
+        }
+    }
 }

apps/client/src/widgets/react/Collapsible.tsx

@@ -2,7 +2,7 @@ import "./Collapsible.css";
 
 import clsx from "clsx";
 import { ComponentChildren, HTMLAttributes } from "preact";
-import { useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 
 import { useElementSize, useUniqueName } from "./hooks";
 import Icon from "./Icon";
@@ -26,9 +26,20 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
     const innerRef = useRef<HTMLDivElement>(null);
     const { height } = useElementSize(innerRef) ?? {};
     const contentId = useUniqueName();
+    const [ transitionEnabled, setTransitionEnabled ] = useState(false);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setTransitionEnabled(true);
+        }, 200);
+        return () => clearTimeout(timeout);
+    }, []);
 
     return (
-        <div className={clsx("collapsible", className, expanded && "expanded")}>
+        <div className={clsx("collapsible", className, {
+            expanded,
+            "with-transition": transitionEnabled
+        })}>
             <button
                 className="collapsible-title"
                 onClick={() => setExpanded(!expanded)}