javascript - Track tiles as they are requested and rendered in MapboxGL -

background:

i'm using mapboxgl display data-heavy maps users. vector tile sources take while load , render screen.

to provide user feedback things happening, i've implemented spinner based off of map.loaded().

map.on('render', () => {   if (!map.loaded()) { showspinner(); }   else { hidespinner(); } }); 

however, can take minutes tile return server , render screen. users have complained map spinner hanging when there still work being performed!

so instead of spinner, i'd show progress bar updates tiles render screen. should give user sense of how work left before map has rendered.

where i'm @ far

to accomplish this, need know mapboxgl events responsible signaling when tile request sent out , when tile rendered screen.

const pendingtiles = {};  // marks tiles loading, works! map.on('dataloading', data => {   if (data.tile) {     pendingtiles[data.tile.uid] = data.tile.state;   }  });  // triggered on every render event, // there appears no way of identifying *what* rendered map.on('render', (data) => {   // how can identify tile rendered? });