反应懒惰/悬念的Google地图组件

Question

我正在使用React lazy动态导入一个捆绑包，该捆绑包在组件中呈现Google地图。我还使用React悬念回退到正在加载的动画，直到Google地图返回。好像地图包已在地图实际呈现到页面上之前就已解决，因此，地图组件为空（没有加载后备动画或呈现的地图）的时间为几毫秒/秒（取决于网络连接性）。有没有很好的解决方法，可以显示加载动画，直到可见地图？我可以想到的一个选项是在DOM中添加加载动画，并为ontilesloaded添加事件监听器，以在触发该事件后从DOM中删除加载动画。有更好的方法吗？

const ReactGoogleMap = React.lazy(() =>
  import(/* webpackChunkName: "my-google-map" */ 'my-google-map.react')
);

export default function LazyLoadMap(props) {
return (
  <Suspense fallback={<Loading size="large" />}>
    <Loading id="loading" size="large" />
    <GoogleMap /> // within this component, add `ontilesloaded` event listener
  </Suspense>);
}