Globe's dark theme lags

[maikkinen]

Hello

I've linked the dark theme to the ReactGlobe like so

const globeTextureUrl = 'https://raw.githubusercontent.com/chrisrzhou/react-globe/master/textures/globe_dark.jpg'

//....

   <ReactGlobe
      markers={markers}
      onClickMarker={onClickMarker}
      onDefocus={onDefocus}
      globeOptions={{
        texture: `${globeTextureUrl}`,
        enableClouds: false
      }}
    />

However, when I open my React app, the globe is first blue. When a button or dropdown (which shouldn't be related to this anyhow) is clikced, the dark theme is applied to he globe.

How to set the black to be there from the beginning?

[chrisrzhou]

I think there might be a slight bug with the default background being applied first. I'll take a look this weekend. Sorry for the delay. I've been busy on other work.

In the meantime, let me know if the onTextureLoaded prop may help with this: https://react-globe.netlify.app/examples/textures

[chrisrzhou]

Hey @maikkinen, this is now fixed in v5.0.0. The issue was v4.0.0 did not allow a way to set this on the initialization of the globe, and only when updates to the *options props are made.

In v5.0.0, some of these props now play a role in the initialization of the globe. In addition, you should be able to just assign globeTexture, globeBackgroundTexture, and globeCloudsTexture and this should load the visualization up without a re-render/flicker. The documentation in https://react-globe.netlify.app/usage/textures should give you an example of how you can wire up relevant callbacks to wait for the textures to load.

Note that v5.0.0 introduces a couple of breaking changes so check the changelog.md or Github release if you want to upgrade to it! There's a couple of bugfixes, improved/flatter props, improved documentations, better support for Globe class, and overall a simplified implementation.