Flickering when using three panels
julianZeitler opened this issue · 1 comments
I am using three horizontally aligned panels. There is some flickering occurring on the right panel whenever I resize with the left handle. I tried to fix this by saving the layout with a cookie as is mentioned in the documentation, but that doesn't seem to fix it. This issue occurs regardless of whether I use client or server components. I set up a
codesanbox as an example using only client components. The flickering occurs only on some positions of the right handle. I noticed, that this effect is not present in versions 0.0.55 and below.
Locally I set up an example with a server component as in the documentation. Here this issue is also arising. I a am using version 12.0.13 in this example.
Server component:
import { cookies } from "next/headers";
import ClientComponent from "./ClientComponent";
export default function Home() {
const layout = cookies().get("react-resizable-panels:layout");
let defaultLayout;
if (layout) {
defaultLayout = JSON.parse(layout.value);
}
return <ClientComponent defaultLayout={defaultLayout} />;
}
Client component:
"use client";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
export default function ClientComponent({
defaultLayout = [30, 40, 30],
}: {
defaultLayout: number[] | undefined;
}) {
const onLayout = (sizes: number[]) => {
document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
};
return (
<PanelGroup direction="horizontal" onLayout={onLayout}>
<Panel
className="bg-slate-100 rounded-lg flex items-center justify-center text-center p-2"
defaultSize={30}
minSize={10}
>
Left panel
</Panel>
<PanelResizeHandle className="mx-1 w-2 bg-slate-300" />
<Panel
className="bg-slate-100 rounded-lg flex items-center justify-center text-center p-2"
defaultSize={30}
minSize={10}
>
Middle panel
</Panel>
<PanelResizeHandle className="mx-1 w-2 bg-slate-300" />
<Panel
className="bg-slate-100 rounded-lg flex items-center justify-center text-center p-2"
defaultSize={40}
minSize={10}
>
Right panel
</Panel>
</PanelGroup>
);
}