From ad8e52f744bfcd4af858aa8f3f51265de1d9e445 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 12:14:44 +0200
Subject: [PATCH] feat(layout): disable transition when promoted attributes are
 shown by default

---
 apps/client/src/widgets/react/Collapsible.css |  7 ++++++-
 apps/client/src/widgets/react/Collapsible.tsx | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/react/Collapsible.css b/apps/client/src/widgets/react/Collapsible.css
index aaa61b6e6..7dca2f565 100644
--- a/apps/client/src/widgets/react/Collapsible.css
+++ b/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;
+        }
+    }
 }
diff --git a/apps/client/src/widgets/react/Collapsible.tsx b/apps/client/src/widgets/react/Collapsible.tsx
index e98e3782f..a6e1957b3 100644
--- a/apps/client/src/widgets/react/Collapsible.tsx
+++ b/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)}