fix bug causing blank page after resize

app/components/Root.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
-import useResizeObserver from "@react-hook/resize-observer"
+import useResizeObserver from "use-resize-observer"
 import { ThemeProvider } from "@mui/material/styles"
 import useMediaQuery from "@mui/material/useMediaQuery"
 import Grid from "@mui/material/Unstable_Grid2"
@@ -71,12 +71,17 @@ export function Root(props: { cable?: any }) {
   const showAnnotationsOnBottom = showAnnotations && smallScreen
 
   const svgRef = React.useRef(null)
-  const containerRef = React.useRef(null)
+  const containerRef = React.useRef<HTMLDivElement>(null)
 
   // Set svg height and scale when resized
-  useResizeObserver(containerRef, _entry => {
-    dispatch({ type: "SET_SVG_HEIGHT" })
-    dispatch({ type: "SET_SVG_SCALE" })
+  useResizeObserver({
+    ref: containerRef,
+    onResize: () => {
+      console.debug("Resize detected. Updating svg height and scale.")
+      dispatch({ type: "SET_SVG_HEIGHT" })
+      dispatch({ type: "SET_SVG_SCALE" })
+      dispatch({ type: "RESET_VIEW" })
+    }
   })
 
   // prevent backspace form navigating away from page in firefox and possibly other browsers
@@ -93,15 +98,11 @@ export function Root(props: { cable?: any }) {
   }, [])
 
   // Reset view once after page is loaded
-  useEffect(() => {
-    dispatch({ type: "RESET_VIEW" })
-  }, [])
-
-  // Set svg height and scale whenever root is re-rendered
   useEffect(() => {
     dispatch({ type: "SET_SVG_HEIGHT" })
     dispatch({ type: "SET_SVG_SCALE" })
-  })
+    dispatch({ type: "RESET_VIEW" })
+  }, [])
 
   // Check for unsaved changed in beforeunload event
   useEffect(() => {
@@ -116,7 +117,7 @@ export function Root(props: { cable?: any }) {
   return (
     <ThemeProvider theme={theme}>
       <SvgRefContext.Provider value={svgRef}>
-        <div id={ROOT_CONTAINER_ID} ref={containerRef}>
+        <div id={ROOT_CONTAINER_ID} ref={containerRef} className="oligrapher-root-container">
           {showHeader && <Header />}
           <div style={{ flex: 1, height: "100%", overflow: "hidden" }}>
             <Grid container style={{ height: "100%" }}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-accountability/oligrapher",
-  "version": "4.0.13",
+  "version": "4.0.14",
   "description": "Network graph visualizer built for LittleSis",
   "main": "index.ts",
   "scripts": {
@@ -29,9 +29,8 @@
     "@hello-pangea/color-picker": "^3.2.2",
     "@hello-pangea/dnd": "^16.2.0",
     "@mui/lab": "^5.0.0-alpha.124",
-    "@mui/material": "^5.11.14",
+    "@mui/material": "^5.11.15",
     "@rails/actioncable": "^7.0.4",
-    "@react-hook/resize-observer": "^1.2.6",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/lodash": "^4.14.192",
     "@types/react-redux": "^7.1.25",
@@ -54,6 +53,7 @@
     "sass": "^1.60.0",
     "slugify": "^1.6.6",
     "typescript": "^5.0.2",
+    "use-resize-observer": "^9.1.0",
     "wretch": "^2.5.1"
   },
   "devDependencies": {