fix: delay icon button offset change on active

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -144,8 +144,24 @@ const CircleButton = ({
   otherIcon?: string
   onClick: () => void
 }) => {
+  const [recentlyChanged, setRecentlyChanged] = React.useState(false)
+
+  React.useEffect(() => {
+    setRecentlyChanged(true)
+    const timer = setTimeout(() => {
+      setRecentlyChanged(false)
+    }, 500)
+    return () => clearTimeout(timer)
+  }, [active])
+
   return (
-    <div data-active={active} style={style} className="tl-circle-button" onMouseDown={onClick}>
+    <div
+      data-active={active}
+      data-recently-changed={recentlyChanged}
+      style={style}
+      className="tl-circle-button"
+      onMouseDown={onClick}
+    >
       <div className="tl-circle-button-icons-wrapper" data-icons-count={otherIcon ? 2 : 1}>
         {otherIcon && <TablerIcon name={otherIcon} />}
         <TablerIcon name={icon} />

tldraw/apps/tldraw-logseq/src/styles.css

@@ -509,6 +509,7 @@ button.tl-select-input-trigger {
   border-radius: 50%;
   border: 2px solid var(--ls-secondary-background-color);
   top: 2px;
+  transition-delay: 0;
 
   .tie {
     transform: translateY(-100%); 
@@ -549,9 +550,17 @@ button.tl-select-input-trigger {
 
   .tl-circle-button-icons-wrapper {
     @apply flex flex-col;
+  }
+
+  i.tie {
+    transition: transform 0.2s ease-in-out;
+    transition-delay: 0;
+  }
 
-    > i.tie {
-      transition: transform 0.2s ease-in-out;
+  &[data-recently-changed=true] {
+    transition-delay: 0.5s;
+    i.tie {
+      transition-delay: 0.5s;
     }
   }