ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix hidden wallet balance layout shift

This commit is contained in:
keyan 2024-04-17 17:21:56 -05:00
parent 59b3d1c375
commit a77f778f27
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/hidden-wallet-summary.js
View File

@ -1,4 +1,4 @@
import { useState, useRef, useEffect } from 'react' import { useState, useMemo } from 'react'
import { abbrNum, numWithUnits } from '@/lib/format' import { abbrNum, numWithUnits } from '@/lib/format'
import { useMe } from './me' import { useMe } from './me'
@ -6,19 +6,19 @@ export default function HiddenWalletSummary ({ abbreviate, fixedWidth }) {
const me = useMe() const me = useMe()
const [hover, setHover] = useState(false) const [hover, setHover] = useState(false)
// prevent layout shifts when hovering by fixing width to initial rendered width const fixedWidthAbbrSats = useMemo(() => {
const ref = useRef() const abbr = abbrNum(me.privates?.sats).toString()
const [width, setWidth] = useState(undefined) if (abbr.length >= 6) return abbr
useEffect(() => {
setWidth(ref.current?.offsetWidth) // add leading spaces if abbr is shorter than 6 characters
}, []) return ' '.repeat(6 - abbr.length) + abbr
}, [me.privates?.sats])
return ( return (
<span <span
ref={ref} style={{ width: fixedWidth ? width : undefined }} className='text-monospace' style={{ whiteSpace: 'pre-wrap' }} align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
className='text-monospace' align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
> >
{hover ? (abbreviate ? abbrNum(me.privates?.sats) : numWithUnits(me.privates?.sats, { abbreviate: false, format: true })) : '******'} {hover ? (abbreviate ? fixedWidthAbbrSats : numWithUnits(me.privates?.sats, { abbreviate: false, format: true })) : '******'}
</span> </span>
) )
} }