X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/cb690390d4f253c3bbb9c543e243cf988f39fbb3..4d9a9766999dda4657bce039a1d56a5591201e95:/services/workbench2/src/views-components/side-panel/side-panel.tsx

diff --git a/services/workbench2/src/views-components/side-panel/side-panel.tsx b/services/workbench2/src/views-components/side-panel/side-panel.tsx
index ebcf9e41d6..fe3edc0016 100644
--- a/services/workbench2/src/views-components/side-panel/side-panel.tsx
+++ b/services/workbench2/src/views-components/side-panel/side-panel.tsx
@@ -45,12 +45,13 @@ const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
 const mapStateToProps = ({ router, sidePanel, detailsPanel }: RootState) => ({
     currentRoute: router.location ? router.location.pathname : '',
     isCollapsed: sidePanel.collapsedState,
+    currentSideWidth: sidePanel.currentSideWidth,
     isDetailsPanelTransitioning: detailsPanel.isTransitioning
 });
 
 export const SidePanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
-        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string, isDetailsPanelTransitioning: boolean }) =>{
+        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps ) =>{
 
         const splitPaneRef = useRef<any>(null)
 
@@ -59,15 +60,23 @@ export const SidePanel = withStyles(styles)(
 
             if (!splitPane) return;
 
-            const observer = new ResizeObserver((entries)=>{
-                for (let i = 0; i < entries.length; i++) {
-                    const width = entries[i].contentRect.width
-                    props.setCurrentSideWidth(width)
-                }
-            })
+            const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+                //entries[0] targets the left side of the split pane
+                const width = entries[0].contentRect.width
+                if (width === props.currentSideWidth) return;
 
-            observer.observe(splitPane)
+                //prevents potential infinite resize triggers
+                window.requestAnimationFrame((): void | undefined => {
+                  if (!Array.isArray(entries) || !entries.length) {
+                      props.setCurrentSideWidth(width)
+                    return;
+                  }
+                });
+              };
+
+            const observer = new ResizeObserver(observerCallback)
 
+            observer.observe(splitPane)
             return ()=> observer.disconnect()
         }, [props])
 
@@ -75,22 +84,21 @@ export const SidePanel = withStyles(styles)(
                 <Grid item xs>
                         {props.isCollapsed ? 
                             <div ref={splitPaneRef}>
-                        <>
-
-                            <SidePanelToggle />
-                            <SidePanelCollapsed />
-                        </>
-                        </div>
+                                <>
+                                    <SidePanelToggle />
+                                    <SidePanelCollapsed />
+                                </>
+                            </div>
                             :
                             <>
-                        <div ref={splitPaneRef}>
-                            <Grid className={classes.topButtonContainer}>
-                                <SidePanelButton key={props.currentRoute} />
-                                <SidePanelToggle/>
-                            </Grid>
-                            <SidePanelTree {...props} />
-                        </div>
-                        </>
+                                <div ref={splitPaneRef}>
+                                    <Grid className={classes.topButtonContainer}>
+                                        <SidePanelButton key={props.currentRoute} />
+                                        <SidePanelToggle/>
+                                    </Grid>
+                                    <SidePanelTree {...props} />
+                                </div>
+                            </>
                         }
                     </Grid>
         )}