🔧 fix: Artifacts Display Crash on Close and Max Width (#7540)

* 🔧 chore: Update react-resizable-panels dependency to version 3.0.2 in package.json and package-lock.json

* fix: Simplify order assignment in SidePanel component based on hasArtifacts condition, fixed frontend crash when artifacts are closed

* refactor: Change throttledSaveLayout to use useMemo for improved performance in SidePanelGroup component

* refactor: Update dependencies in SidePanel component's useEffect hooks for improved responsiveness
This commit is contained in:
Danny Avila 2025-05-24 16:53:46 -04:00 committed by GitHub
parent 449d9b7613
commit fc8d24fa5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 31 additions and 20 deletions

View file

@ -87,7 +87,7 @@
"react-i18next": "^15.4.0",
"react-lazy-load-image-component": "^1.6.0",
"react-markdown": "^9.0.1",
"react-resizable-panels": "^2.1.8",
"react-resizable-panels": "^3.0.2",
"react-router-dom": "^6.11.2",
"react-speech-recognition": "^3.10.0",
"react-textarea-autosize": "^8.4.0",

View file

@ -78,7 +78,7 @@ const SidePanel = ({
setFullCollapse(true);
localStorage.setItem('fullPanelCollapse', 'true');
panelRef.current?.collapse();
}, []);
}, [panelRef, setMinSize, setIsCollapsed, setFullCollapse, setCollapsedSize]);
const Links = useSideNavLinks({
endpoint,
@ -107,7 +107,17 @@ const SidePanel = ({
} else {
panelRef.current?.expand();
}
}, [isCollapsed, newUser, setNewUser, navCollapsedSize]);
}, [
newUser,
panelRef,
setNewUser,
setMinSize,
isCollapsed,
setIsCollapsed,
setFullCollapse,
setCollapsedSize,
navCollapsedSize,
]);
return (
<>
@ -137,7 +147,7 @@ const SidePanel = ({
<ResizablePanel
tagName="nav"
id="controls-nav"
order={hasArtifacts != null ? 3 : 2}
order={hasArtifacts ? 3 : 2}
aria-label={localize('com_ui_controls')}
role="navigation"
collapsedSize={collapsedSize}

View file

@ -60,11 +60,12 @@ const SidePanelGroup = ({
const currentLayout = useMemo(() => normalizeLayout(calculateLayout()), [calculateLayout]);
const throttledSaveLayout = useCallback(
throttle((sizes: number[]) => {
const normalizedSizes = normalizeLayout(sizes);
localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
}, 350),
const throttledSaveLayout = useMemo(
() =>
throttle((sizes: number[]) => {
const normalizedSizes = normalizeLayout(sizes);
localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
}, 350),
[],
);

22
package-lock.json generated
View file

@ -2579,7 +2579,7 @@
"react-i18next": "^15.4.0",
"react-lazy-load-image-component": "^1.6.0",
"react-markdown": "^9.0.1",
"react-resizable-panels": "^2.1.8",
"react-resizable-panels": "^3.0.2",
"react-router-dom": "^6.11.2",
"react-speech-recognition": "^3.10.0",
"react-textarea-autosize": "^8.4.0",
@ -4623,6 +4623,16 @@
"node": ">=0.10.0"
}
},
"client/node_modules/react-resizable-panels": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.2.tgz",
"integrity": "sha512-j4RNII75fnHkLnbsTb5G5YsDvJsSEZrJK2XSF2z0Tc2jIonYlIVir/Yh/5LvcUFCfs1HqrMAoiBFmIrRjC4XnA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"client/node_modules/ts-jest": {
"version": "29.2.5",
"resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.5.tgz",
@ -39588,16 +39598,6 @@
}
}
},
"node_modules/react-resizable-panels": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.8.tgz",
"integrity": "sha512-oDvD0sw34Ecx00cQFLiRJpAE2fCgNLBr8DMrBzkrsaUiLpAycIQoY3eAWfMblDql3pTIMZ60wJ/P89RO1htM2w==",
"license": "MIT",
"peerDependencies": {
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/react-router": {
"version": "6.22.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",