Replaced person card size observer

package.json

@@ -14,23 +14,23 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
     "@heroicons/react": "^2.1.1",
-    "@mui/base": "^5.0.0-beta.33",
+    "@mui/base": "^5.0.0-beta.37",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/react-query": "^5.22.2",
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.58",
+    "@tanstack/react-query": "^5.24.1",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
     "@uidotdev/usehooks": "^2.4.1",
     "autoprefixer": "^10.4.17",
     "axios": "^1.6.7",
-    "critters": "^0.0.20",
+    "critters": "^0.0.21",
     "debug": "^4.3.4",
     "decanter": "^7.2.0",
     "drupal-jsonapi-params": "^2.3.1",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
-    "html-react-parser": "^5.1.7",
+    "html-react-parser": "^5.1.8",
     "jsona": "^1.12.1",
     "next": "^14.1.0",
     "next-drupal": "^1.6.0",
@@ -39,12 +39,11 @@
     "react": "^18.2.0",
     "react-aria": "^3.32.1",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.12",
-    "react-focus-lock": "^2.11.1",
+    "react-error-boundary": "^4.0.13",
+    "react-focus-lock": "^2.11.2",
     "react-intersection-observer": "^9.8.1",
     "react-obfuscate": "^3.6.9",
     "react-obfuscate-email": "^1.1.2",
-    "react-resize-detector": "^10.0.1",
     "react-stately": "^3.30.1",
     "react-tiny-oembed": "^1.1.0",
     "server-only": "^0.0.1",
@@ -61,9 +60,9 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "4.2.0",
     "@types/debug": "^4.1.12",
-    "@types/qs": "^6.9.11",
+    "@types/qs": "^6.9.12",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.0",
+    "eslint-config-next": "^14.1.1",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-unused-imports": "^3.1.0"
   },

src/components/node/stanford-person/card.tsx

@@ -2,11 +2,17 @@
 
 import VerticalPersonCard from "./vertical-card";
 import HorizontalPersonCard from "./horizontal-card";
-import {useResizeDetector} from "react-resize-detector";
 import {NodeStanfordPerson} from "@/lib/gql/__generated__/drupal.d";
+import {useDebounceCallback, useResizeObserver} from "usehooks-ts";
+import {useRef, useState} from "react";
 
 const StanfordPersonCard = ({node, ...props}: { node: NodeStanfordPerson }) => {
-  const {width, ref} = useResizeDetector();
+  const ref = useRef<HTMLDivElement>(null)
+  const [{width}, setSize] = useState<{ width?: number, height?: number }>({width: undefined})
+
+  const onResize = useDebounceCallback(setSize, 200)
+  useResizeObserver({ref, onResize})
+
   const Card = (width && width < 510) ? VerticalPersonCard : HorizontalPersonCard;
   return (
     <div ref={ref}>