X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/cb690390d4f253c3bbb9c543e243cf988f39fbb3..4a9e5c926179b3ab8ff7231904e2db93d42149e0:/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..80cfe75b27 100644
--- a/services/workbench2/src/views-components/side-panel/side-panel.tsx
+++ b/services/workbench2/src/views-components/side-panel/side-panel.tsx
@@ -59,15 +59,24 @@ 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[]) => {
+                try {
+                    //prevents potential infinite resize triggers
+                    window.requestAnimationFrame((): void | undefined => {
+                    if (!Array.isArray(entries) || !entries.length) {
+                        return;
+                    }
+                        const width = entries[0].contentRect.width
+                        props.setCurrentSideWidth(width)
+                    });
+                } catch (error) {
+                    console.error('Error in resize observer callback', error);
                 }
-            })
+              };
 
-            observer.observe(splitPane)
+            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>
         )}