prevent horizontal layout shift when balance is hidden

components/header.js

@@ -10,7 +10,7 @@ import Price from './price'
 import { useMe } from './me'
 import Head from 'next/head'
 import { signOut } from 'next-auth/react'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { randInRange } from '../lib/rand'
 import { abbrNum } from '../lib/format'
 import NoteIcon from '../svgs/notification-4-fill.svg'
@@ -26,16 +26,8 @@ import AnonIcon from '../svgs/spy-fill.svg'
 import Hat from './hat'
 import HiddenWalletSummary from './hidden-wallet-summary'
 
-function WalletSummary ({ me, hideBalance }) {
+function WalletSummary ({ me }) {
-  const [show, setShow] = useState(false)
+  if (!me) return null
-
-  useEffect(() => {
-    // fix warning about useLayoutEffect usage during SSR
-    // see https://reactjs.org/link/uselayouteffect-ssr
-    setShow(true)
-  }, [])
-
-  if (!me || !show) return null
   if (me.hideWalletBalance) {
     return <HiddenWalletSummary abbreviate fixedWidth />
   }

components/hidden-wallet-summary.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useLayoutEffect } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { abbrNum, numWithUnits } from '../lib/format'
 import { useMe } from './me'
 
@@ -9,12 +9,15 @@ export default function HiddenWalletSummary ({ abbreviate, fixedWidth }) {
   // prevent layout shifts when hovering by fixing width to initial rendered width
   const ref = useRef()
   const [width, setWidth] = useState(undefined)
-  useLayoutEffect(() => {
+  useEffect(() => {
     setWidth(ref.current?.offsetWidth)
   }, [])
 
   return (
-    <span ref={ref} style={{ width: fixedWidth ? width : undefined }} className='d-inline-block' align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}>
+    <span
+      ref={ref} style={{ width: fixedWidth ? width : undefined }}
+      className='d-inline-block' align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
+    >
       {hover ? (abbreviate ? abbrNum(me.sats) : numWithUnits(me.sats, { abbreviate: false })) : '*****'}
     </span>
   )