Tiny layout shift (SSR)

I experiment a tiny layout shift (tenth of a percent) after hydration.

On the server, and during the first render on the client, Panes flex-grow are set with defaultSize:

https://github.com/bvaughn/react-resizable-panels/blob/6d9f1b33553fb61a548384631b3731271dfe66f6/packages/react-resizable-panels/src/utils/computePanelFlexBoxStyle.ts#L29

On consecutive renders, Panes flex-grow are set with size.toPrecision(precision)

The difference between the raw size and the rounded one cause a tiny layout shift just after hydration. (eg. flex-grow:64.3238875877 becomes flex-grow:64.3).

Is it possible to apply same constraints on defaultSize than on size to prevent this?

Possible user workaround: store rounded sizes[] in cookie/backend instead of the raw one.

  const onLayout = (sizes: number[]) => {
    const roundedSizes = sizes.map(s => Number(s.toPrecision(3)));
    ...
  };

bvaughn / react-resizable-panels

Tiny layout shift (SSR) #295