fix: initialize dimensions before first paint

The container dimensions are in the `ResizeObserver` callback. It fires
only after the first paint. This means that the dimensions are not
initialized during the first paint, which causes a layout shift.

The dimensions are known before the first paint. We can retrieve the
container width and height by using `getBoundingClientRect` inside
`useLayoutEffect`. This way we can initialize the dimensions correctly
so the panes are already sized the right way during the first render.

src/allotment.tsx

@@ -451,6 +451,15 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       },
     });
 
+    useIsomorphicLayoutEffect(() => {
+      if (!dimensionsInitialized) {
+        const { height, width } = containerRef.current.getBoundingClientRect();
+        splitViewRef.current?.layout(vertical ? height : width);
+        layoutService.current.setSize(vertical ? height : width);
+        setDimensionsInitialized(true);
+      }
+    }, [dimensionsInitialized, vertical]);
+
     useEffect(() => {
       if (isIOS) {
         setSashSize(20);