Skip to content

Commit

Permalink
add resizing indicator data attribute
Browse files Browse the repository at this point in the history
  • Loading branch information
Brendonovich committed Aug 8, 2024
1 parent c1c6f5f commit d932e4a
Showing 1 changed file with 23 additions and 1 deletion.
24 changes: 23 additions & 1 deletion packages/core/src/tabs/tabs-indicator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,36 @@ export function TabsIndicator<T extends ValidComponent = "div">(
),
);

createResizeObserver(context.selectedTab, computeStyle);
const [resizing, setResizing] = createSignal(false);

let timeout: NodeJS.Timeout | null = null;
let prevTarget: any = null;
createResizeObserver(context.selectedTab, (_, t) => {
if (prevTarget !== t) {
prevTarget = t;
return;
}

setResizing(true);

if (timeout) clearTimeout(timeout);

// gives the browser a chance to skip any animations that are disabled while resizing
timeout = setTimeout(() => {
timeout = null;
setResizing(false);
}, 1);

computeStyle();
});

return (
<Polymorphic<TabsIndicatorRenderProps>
as="div"
role="presentation"
style={combineStyle(style(), local.style)}
data-orientation={context.orientation()}
data-resizing={resizing()}
{...others}
/>
);
Expand Down

0 comments on commit d932e4a

Please sign in to comment.