Empty Grey Box When Conditionally Rendering GMaps

Before mounting the google map, I’m waiting for some requests to finish so I’m trying to put another element in the meantime. The problem is that an empty grey div stays even though I’m not rendering the google map and as a result pushes my loading screen all the way to the bottom.

Here’s a snippet of the elements I’m trying to render:

return (Object.keys(this.state.center).length !== 0) ? (
      <GoogleMap
        defaultZoom={this.state.zoom}
        defaultCenter={this.state.center}
        options={{scrollwheel: true}}
      >
        {this.state.municipalities.map(municipality => {
          return <Polygon key={municipality.name}
                          paths={municipality.borders}
                          fillOpacity={0.3}/>;
        })}
        {this.state.trees.map(tree => {
          return <Marker key={tree.treeId} position={{lat: tree.location.latitude, lng: tree.location.longitude}}/>;
        })}
      </GoogleMap>
    ) : (
      <div>
      <Segment>
        <Dimmer active>
          <Loader size='huge'/>
        </Dimmer>
        <Image centered size='medium' src={Logo}/>
      </Segment>
      </div>
    );

[abbasyadollahi]

@SyedSaifAli I’m sending an object {lat: latitude, lng: longitude} for the defaultCenter property and the map renders fine when it is loaded. The problem I have is that a grey div that would normally render the map persists even if I’m not rendering a <GoogleMap> element. I believe it might have something to do with the withProps but not sure

[hjJunior]

I have identified an weird behaviour, really inconsistent, when you have markers and one of them have invalid lat/lng you may have this empty grey box (and no errors on console 🤦)

On my specific case, this edge case was happening between new renders so everytime that I was updating the state, it was changing between empty box and the working map, also during this re-render I could notice a kick flash of map working with marker

Related with:

• #803
• #186

TL;DR: Check if you have any markers that may have an invalid Latitude / Longitude