Customizable resize preview mode - #746
Conversation
|
@mwrshah is attempting to deploy a commit to the Brian Vaughn's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
This is a very neat idea and I'm in favor of adding this functionality to the package, but I think we should tweak a few things about it:
- Move the prop from
PaneltoGroup; this is something that I think should apply to the group as a whole - Drop the "freeze" option (I don't think it's offer much benefit over the "preview" option), so maybe something more like
resizePreviewMode: "panel" | "separator" - Replace the imperative preview rendering code with declarative code (probably the
Groupshould render a preview indicator when a drag is active) - If the thing being dragged is an actual
Separator, the preview should look similar to it (similar size, maybe different style?); we probably want to think about how to allow users to customize the preview indicator too (maybe a new component type?)
I also think that- rather than adding a new docs route for this- we should rename the "Group resize behavior" tab to just "Resize behaviors" and add a section for this to that too. That seems pretty related/discoverable, more so than tacking it onto the nested groups example.
Not sure if you'd be interested in iterating on the above changes or if you'd rather leave that to me. I'll go ahead and start working on the above changes. Maybe it won't be too much effort :)
|
@bvaughn I would like to take a stab at it if you don't mind. Agree with you, and appreciate the thought put into the advice. One thing I would push back on: freeze is sort of allowing the rest of the panels to visually alter live, while preview just moves the separator. I like how freeze looks, but it's subjective. And not entirely sure it won't add janky code to make it possible - especially that custom scrollbar hide . So I will proceed per your instructions. All good ideas: make it declarative, simllar / same separator style. not expanding docs. |
|
Happy to let you take a stab at it. Go for it!
…On Sat, Sep 19, 2026 at 3:08 PM Munawar Shah ***@***.***> wrote:
*mwrshah* left a comment (bvaughn/react-resizable-panels#746)
<#746 (comment)>
@bvaughn <https://github.com/bvaughn> I would like to take a stab at it
if you don't mind.
Agree with you, and appreciate the thought put into the advice. One thing
I would push back on: freeze is sort of allowing the rest of the panels to
visually alter live, while preview just moves the separator. I like how
freeze looks, but it's subjective. And not entirely sure it won't add janky
code to make it possible - especially that custom scrollbar hide . So I
will proceed per your instructions. All good ideas: make it declarative,
simllar / same separator style. not expanding docs.
—
Reply to this email directly, view it on GitHub
<#746?email_source=notifications&email_token=AAAHHHKFM7G5DE4JYCU3S6L5P3KRJA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKNZUGQ2TQMRTGA2KM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLDGN5XXIZLSL5RWY2LDNM#issuecomment-5744582304>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAAHHHI446ZHVBQQXHUWZJ35P3KRJAVCNFSNUABFKJSXA33TNF2G64TZHM2TQMJSHA2TEOJTHNEXG43VMU5TKNBVGU2DENZYGQ4KC5QC>
.
Triage notifications, keep track of coding agent tasks and review pull
requests on the go with GitHub Mobile for iOS
<https://github.com/notifications/mobile/ios/AAAHHHPE27B3Z2IW63NKM4D5P3KRJA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKNZUGQ2TQMRTGA2KM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJKTGN5XXIZLSL5UW64Y>
and Android
<https://github.com/notifications/mobile/android/AAAHHHJWDZ3VFJU3YBPWFS35P3KRJA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKNZUGQ2TQMRTGA2KM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLTGN5XXIZLSL5QW4ZDSN5UWI>.
Download it today!
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
08aaa9c to
9876053
Compare
|
Hi! @bvaughn updated the implementation. Appreciate the time you've invested so far. I have mostly stuck to your suggestions, declaratively showing a preview during active resize, based on resizePreviewMode on Group. Reusing separator styles. Opinionated calls taken:
|
|
Excellent! I'll take a look this morning 😄 |
21ef0b9 to
820f2d7
Compare
|
I've made a few changes to the docs (e.g. more examples) and to the API (e.g. show overlay previews for inactive separators that are impacted by a resize) I think this feature is ready to go now! Thanks a ton for the collaboration! |
This branch was successfully deployed
2 participants
Suggested implementation for #745.
Update: current implementation
Following the feedback below:
Group resizePreviewMode="panel" | "separator"; default remains live resizing.[data-resize-preview].Validation: 439 existing tests, TypeScript, lint, formatting, and a CDP drag check passed. No new performance claim or preview-specific test.
Original proposal — superseded
A slightly different proposed UX - not updating content in-panel while a drag is happening.Delivers about 3× more pointer updates during dragging in the retained benchmark:Add optionalPanel mode="freeze" | "preview". optional props.Freeze keeps content dimensions fixed while panel bounds move (hides scrollbars until release - I found it to be a bit weird to have a scrollbar showing in the middle of a component).Preview moves a divider indicator and applies layout on release.Omit the prop for normal live resizing; keyboard and imperative resizing remain immediate.Extended the existing Nested groups example with a three-state toggle:Original demoRegression checkIdentical production example, 1,000 rows, Chrome 152 headless, 6× CPU throttling, continuous five-second back-and-forth drag. Five alternating baseline/branch pairs: main 19.60 updates/sec; branch 19.96. Movement main-thread work differs by +0.08%. No meaningful live-mode throughput regression detected in this fixture.These are pointer updates, not FPS. Three additional samples per optional mode.