[Bug] there is an obvious flicker when the defaultSizes contains zero on first render

[percy507]

See the gif, the defaultSizes is [0, 10000]. I refresh page three times. The flicker occurs twice.

[percy507]

Ahhh, I notice there is a PR (#526) which can solve this problem.

[johnwalley]

Hi @percy507. Thanks for submitting this issue. I'll get onto #526 and hopefully that will resolve this.

[johnwalley]

#526 has been merged and released as v1.18.0. Let me know if it helps 👍

[percy507]

Hi @johnwalley,

See the gif, the defaultSizes is [0, 10000]. I refresh page three times. The flicker occurs twice.

Well, after some test, the #526 can resolve the problem what I found in storybook.

But unfortunately, the same problem happens in my personal project. I made a demo, it can reproduce the flicker. https://codesandbox.io/s/thirsty-wind-bzqg9h?file=/src/App.tsx

After some test and debug, I found some unwanted behaviors.

• After initializing the Allotment component, the onChange method is called which is not triggered manually.
• When the visible of Pane is false, the init size of the pane should be 0 before it mounted. But during my debug, I found it's size first init as its minSize, then cause the visible is false, re-layout to the right size. (I guess this is why the flicker occurs)
  • The related code might be here. https://github.com/johnwalley/allotment/blob/main/src/split-view/split-view.ts#L1022

[johnwalley]

Thanks for the fast, detailed feedback. I'll try to tackle this soon.

[percy507]

After initializing the Allotment component, the onChange method is called which is not triggered manually.

Now we can use onDragEnd instead of onChange.

When the visible of Pane is false, the init size of the pane should be 0 before it mounted. But during my debug, I found it's size first init as its minSize, then cause the visible is false, re-layout to the right size. (I guess this is why the flicker occurs)

For this one, I delete the below commented code in this place. Then everything works fine.

I guess the flicker (layout shift) happens because the gap time is a bit long between execute code of update views and first execute setDimensionsInitialized(true).

useResizeObserver({
  ref: containerRef,
  onResize: ({ width, height }) => {
    if (width && height) {
      splitViewRef.current?.layout(vertical ? height : width);
      layoutService.current.setSize(vertical ? height : width);
      // setDimensionsInitialized(true);
    }
  },
});

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
]);