Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
How to set up a skeleton screen or a loading bar until IgrGeographicMap renders


So I'm displaying maps with the IgrGeographicMap component. Since their rendering can take quite some time depending on the size of values, I'm trying to hide them behind a skeleton screen until they render. 

Usually, I'd use a variable "loaded" in the local state, that turns "false" at the beginning of the rendering, and that becomes "true" when the rendering ends. Therefore, the IgrGeographicMap will be displayed if "loaded" is "true" ; else some Skeleton component will be displayed to imitate the loading process.

This is the code for this general idea (sorry for the image quality, couldn't do better) : 

The trick here is that I am using references to update the data of IgrGeographicMap which is the main part of the loading process (with the onMapRef() function). Therefore, if I display a skeleton instead of IgrGeographicMap, then the onMapRef() function is never called, and the data never gets updated.

How could I find a compromise to both call the onMapRef function but still display a skeleton, or any kind of loading icon?

Thanks for your help, 

Have a good day

Parents Reply Children
No Data