Hello,
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
Unfortunately you will have to I would remove the loaded flag if you need to reference it. You can set the map's initial height to zero. When you are ready to display the map, then set the height and remove the skeleton.
My guess is you are trying to adopt something similar to this
www.basefactor.com/react-how-to-display-a-loading-indicator-on-fetch-calls
Thanks I'm using this approach now (map dimensions set to 0 until it loads, and a skeleton that disappears).
I consider the map ready and loaded when the new data used by the map has been updated to the state.
However, for big amount of data, the rendering of the data points on the map is not instantaneous. Therefore there is some time during which the map is considered ready and gets displayed, so the skeleton disappears and we can see the axis and the grid, but not yet the data points.
Is there an event in the IgrGeographicMap that gets triggered once the data has been rendered?
The only thing I found in the API is an event that gets triggered when map tiles get rendered (and this gets triggered before the data has been rendered) : www.infragistics.com/.../igrgeographicmap.html
Unfortunately there is no such event when the map has completed loading the data. Data rendering could be an ongoing process, so there is never a point in-which we would ever know when to fire an event. My best recommendation is to pursue looking into a function when the state has updated. This is more of a react question on when to figure out when the state has updated.