[C-711] Change useSize to useMeasure in ProfileBio (#1903)

packages/web/src/pages/profile-page/components/desktop/ProfileBio.tsx

@@ -1,16 +1,17 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { Name, squashNewLines } from '@audius/common'
+import { ResizeObserver } from '@juggle/resize-observer'
 import cn from 'classnames'
 import { Options } from 'linkifyjs'
 import Linkify from 'linkifyjs/react'
 import { animated } from 'react-spring'
+import useMeasure from 'react-use-measure'
 
 import { ReactComponent as IconCaretDownLine } from 'assets/img/iconCaretDownLine.svg'
 import { ReactComponent as IconCaretUpLine } from 'assets/img/iconCaretUpLine.svg'
 import { make, useRecord } from 'common/store/analytics/actions'
 import { OpacityTransition } from 'components/transition-container/OpacityTransition'
-import { useSize } from 'hooks/useSize'
 
 import SocialLink, { Type } from '../SocialLink'
 
@@ -47,10 +48,11 @@ export const ProfileBio = ({
   instagramHandle,
   tikTokHandle
 }: ProfileBioProps) => {
-  const bioRef = useRef<HTMLDivElement>(null)
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [isCollapsible, setIsCollapsible] = useState(false)
-  const bioSize = useSize({ ref: bioRef })
+  const [bioRef, { height: bioSize }] = useMeasure({
+    polyfill: ResizeObserver
+  })
 
   const linkCount = [
     website,