Some parts take long to appear on screen

[FilipePfluck]

Description

Some parts of some components take a long time to appear on screen. Namely the indicator on the Tab and SegmentGroup component, and the Thumb and Markers on the Slider component. Perhaps this also happens on other components I'm not aware of yet.

This causes layout shift and bad UX. It would be awesome if this could be fixed :smile:

Link to Reproduction (or Detailed Explanation)

https://ark-ui.com/docs/components/slider

Steps to Reproduce

open the link refresh the page pay close attention to the slider component and see that the thumb and markers take longer to be displayed

Ark UI Version

1.0.1

Framework

• [X] React
• [ ] Solid
• [ ] Vue

Browser

No response

Additional Information

No response

[cschroeter]

@FilipePfluck

This is intended. The position for the thumb needs to be calculated relative to the available width of the track which is only available on the client side.

[FilipePfluck]

Is it impossible to determine the position of the thumb on server side? I think it may be possible, if you have access to the min value, max value, and thumb value on the server side. Then you can position the thumb relative to the track using transform, no? here's a picture of the slider component before positioning the thumb on the client side. You can see that the size of the range is known, therefore I think it should be possible to determine the position of the thumber too.

[segunadebayo]

For the slider, two ways to solve this:

• Pass the thumb size context property to avoid the layout short
• Set the thumb alignment to “center” which doesn’t compute the thumb size on mount.

For the tabs and segment indicator, client side measurement is required.

[FilipePfluck]

sorry @segunadebayo I couldn't understand, can you explain again in more detail?

[FilipePfluck]

nevermind, got it