JustFly1984
commented
1 year ago in LoadScript there is a boolean prop preventGoogleFontsLoading or something. Roboto fonts are loaded by google. I've made a hack to prevent it. useLoadScript hook have no similar functionality. You can look the source code, though as I remember, my hack can mess with some css in js library so use with caution.
TLDR Using custom fonts and conditionally rendering the map causes layout shift as fonts are unnecessarily refetched.
Description This bug seems to have always existed, also in older version. Because the package is pretty much used with NextJS, I think it's good to bring it to attention here. It is not clear if NextJs is at fault or the package. I will later add a repo which can reproduce the issue.
To keep it short: when using custom fonts,from a woff2 file or google fonts, with either next-fonts package or NextJs native "next/font" module AND rendering the map conditionally where a button click opens up a map, the fonts for the entire website reload after opening up the map. There is a fetch for the fonts file in Network Tab and it is quite ugly seeing old fonts for a split second. Right after that fetch there are also fetches of additional fonts unrelated to my app, by the google maps package itself I suppose. Enabling preventGoogleFontsLoading does not solve the issue (what does it do? It makes the info box look transparent?)
Your Environment
NextJS 13.2.3 React 18.2.0, but also happens in Next11 and React 17.
@react-google-maps/api latest version (old ones have that behavior too)
How does it behave?
Fonts reload at opening up a map.
How should it behave correctly?
Fonts of my app should not be refetched.