recalculate on font face loaded

package.json

@@ -22,7 +22,8 @@
     "react-dom": "18.1.0",
     "react-hook-form": "^7.33.1",
     "react-identicons": "^1.2.5",
-    "react-jazzicon": "^1.0.4"
+    "react-jazzicon": "^1.0.4",
+    "use-font-face-observer": "^1.2.1"
   },
   "devDependencies": {
     "@types/node": "17.0.36",

theme/foundations/typography.ts

 import { theme } from '@chakra-ui/react';
 
+export const BODY_TYPEFACE = 'Inter';
+
 const typography = {
   fonts: {
     heading: `Poppins, ${ theme.fonts.heading }`,
-    body: `Inter, ${ theme.fonts.body }`,
+    body: `${ BODY_TYPEFACE }, ${ theme.fonts.body }`,
   },
   textStyles: {
     h2: {

ui/shared/AddressLinkWithTooltip.tsx

@@ -5,16 +5,18 @@ import { HStack, Link } from '@chakra-ui/react';
 import AddressWithDots from './AddressWithDots';
 import CopyToClipboard from './CopyToClipboard';
 
+const FONT_WEIGHT = '600';
+
 const AddressLinkWithTooltip = ({ address }: {address: string}) => {
   return (
     <HStack spacing={ 2 } alignContent="center" overflow="hidden">
       <Link
         href="#"
         overflow="hidden"
-        fontWeight={ 600 }
+        fontWeight={ FONT_WEIGHT }
         lineHeight="24px"
       >
-        <AddressWithDots address={ address }/>
+        <AddressWithDots address={ address } fontWeight={ FONT_WEIGHT }/>
       </Link>
       <CopyToClipboard text={ address }/>
     </HStack>

ui/shared/AddressWithDots.tsx

@@ -11,14 +11,21 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Tooltip } from '@chakra-ui/react'
 import _debounce from 'lodash/debounce';
+import type { FontFace } from 'use-font-face-observer';
+import useFontFaceObserver from 'use-font-face-observer';
+import { BODY_TYPEFACE } from 'theme/foundations/typography';
 
 const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
 
-const AddressWithDots = ({ address }: {address: string}) => {
+const AddressWithDots = ({ address, fontWeight }: {address: string; fontWeight: FontFace['weight']}) => {
   const addressRef = useRef<HTMLSpanElement>(null);
   const [ displayedAddress, setAddress ] = React.useState(address);
 
+  const isFontFaceLoaded = useFontFaceObserver([
+    { family: BODY_TYPEFACE, weight: fontWeight },
+  ]);
+
   const calculateString = useCallback(() => {
     const addressEl = addressRef.current;
     if (!addressEl) {
@@ -53,8 +60,14 @@ const AddressWithDots = ({ address }: {address: string}) => {
     parent.removeChild(shadowEl);
   }, [ address ]);
 
+  // we want to do recalculation when isFontFaceLoaded flag is changed
+  // but we don't want to create more resize event listeners
+  // that's why there are separate useEffect hooks
   useEffect(() => {
     calculateString();
+  }, [ calculateString, isFontFaceLoaded ])
+
+  useEffect(() => {
     const resizeHandler = _debounce(calculateString, 50)
     window.addEventListener('resize', resizeHandler)
     return function cleanup() {

ui/shared/TruncatedTextTooltip.tsx

 import React from 'react';
 import { Tooltip } from '@chakra-ui/react'
 import debounce from 'lodash/debounce';
+import useFontFaceObserver from 'use-font-face-observer';
+import { BODY_TYPEFACE } from 'theme/foundations/typography';
 
 interface Props {
   children: React.ReactNode;
@@ -11,6 +13,10 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
   const childRef = React.useRef<HTMLElement>(null);
   const [ isTruncated, setTruncated ] = React.useState(false);
 
+  const isFontFaceLoaded = useFontFaceObserver([
+    { family: BODY_TYPEFACE },
+  ]);
+
   const updatedTruncateState = React.useCallback(() => {
     if (childRef.current) {
       const scrollWidth = childRef.current.scrollWidth;
@@ -24,10 +30,15 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
     }
   }, []);
 
-  React.useLayoutEffect(() => {
+  // FIXME: that should be useLayoutEffect, but it keeps complaining about SSR
+  // let's keep it as it is until the first issue
+  React.useEffect(() => {
     updatedTruncateState()
-  }, [ updatedTruncateState ]);
+  }, [ updatedTruncateState, isFontFaceLoaded ]);
 
+  // we want to do recalculation when isFontFaceLoaded flag is changed
+  // but we don't want to create more resize event listeners
+  // that's why there are separate useEffect hooks
   React.useEffect(() => {
     const handleResize = debounce(updatedTruncateState, 1000)
     window.addEventListener('resize', handleResize)
@@ -38,7 +49,7 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
   }, [ updatedTruncateState ]);
 
   // as for now it supports only one child
-  // it is not cleared how to manage case with two or more children
+  // and it is not cleared how to manage case with two or more children
   const child = React.Children.only(children) as React.ReactElement & {
     ref?: React.Ref<React.ReactNode>;
   }

yarn.lock

@@ -1860,6 +1860,11 @@ focus-lock@^0.11.2:
   dependencies:
     tslib "^2.0.3"
 
+fontfaceobserver@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
+  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
+
 framer-motion@^6:
   version "6.3.6"
   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.3.6.tgz#9ca52544a7d0c74668f880eb2cab4a5de6dc71a0"
@@ -2823,6 +2828,14 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 react@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
@@ -3322,6 +3335,14 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-font-face-observer@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-font-face-observer/-/use-font-face-observer-1.2.1.tgz#2b33a389b82b48e2744f439abc1d5d6201fc099d"
+  integrity sha512-5ieKTMvtUux0l7YoOEz842djfgMH3oVg+tO13E/kyS+gGRLDyfAMmRv0D3fzM7UdFag1kz+3AQIFLkkfEF3TUg==
+  dependencies:
+    fontfaceobserver "2.1.0"
+    react "17.0.2"
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"