Tiny layout shift (SSR)

[damaafer]

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:

react-resizable-panels/packages/react-resizable-panels/src/utils/computePanelFlexBoxStyle.ts

Line 29 in 6d9f1b3

flexGrow = defaultSize ?? "1";

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]

Hopefully fixed in a45ab6c; published in 2.0.7

---

❤️ → ☕ givebrian.coffee