fix: header layout action button initial flash

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 9, 2024 · 6758793 · 6758793
1 parent a765cd2
commit 6758793
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/renderer/src/modules/feed-column/corner-player.tsx b/src/renderer/src/modules/feed-column/corner-player.tsx
@@ -281,14 +281,12 @@ const ActionIcon = ({
   children?: React.ReactNode
 }) => (
   <Tooltip delayDuration={labelDelayDuration}>
-    <TooltipTrigger>
-      <button
-        type="button"
-        className="center size-6 rounded-md text-zinc-500 hover:bg-theme-button-hover"
-        onClick={onClick}
-      >
-        {children || <i className={className} />}
-      </button>
+    <TooltipTrigger
+      className="center size-6 rounded-md text-zinc-500 hover:bg-theme-button-hover"
+      onClick={onClick}
+      asChild
+    >
+      <button type="button">{children || <i className={className} />}</button>
     </TooltipTrigger>
     <TooltipContent align={tooltipAlign}>{label}</TooltipContent>
   </Tooltip>

diff --git a/src/renderer/src/modules/feed-column/header.tsx b/src/renderer/src/modules/feed-column/header.tsx
@@ -75,8 +75,12 @@ export const FeedColumnHeader = () => {
 const LayoutActionButton = () => {
   const feedColumnShow = useFeedColumnShow()
 
+  const [animation] = useState({
+    width: !feedColumnShow ? "auto" : 0,
+  })
+
   return (
-    <m.div animate={{ width: !feedColumnShow ? "auto" : 0 }} className="overflow-hidden">
+    <m.div initial={animation} animate={animation} className="overflow-hidden">
       <ActionButton
         tooltip="Toggle Sidebar"
         icon={