How to know whether leaflet layer is fully rendered or not in browser?

I am trying to check the layer rendering event. I have tried the following code, but it is not working. Am I missing something?

var renderer = new L.canvas(); // I tried with L.svg() too
var latlngs = [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]];
var polygon = L.polygon(latlngs, { color: 'red', renderer: renderer }).addTo(map);

//update event
renderer.on('update', () => {
      console.log('polygon loaded')
      renderer.off('update')
    })

I notice that the update method on the renderer only works after a map pan or zoom event. But on the first map render, it didn't trigger. Any help, please?

I have added the same question in leaflet discussion section

PS: The following code works perfectly for the tilelayer but not on the other type of layers.

tile_layer.on("load",function() { console.log("all visible tiles have been loaded") });

from How to know, whether leaflet layer is fully rendered or not in browser?