Leaflet Swap/Load tiles have a delay ( flashing /flicker) in angular

I'm working on an Angular application that mainly use Leaflet library(ngx leaflet) , now the problem that i am facing is on loading the map initially ,switching the map layer or even zooming in /out , i can notice the tiles flicker/flash . What i did was investigating the network label and i can see the tiles take 1/2 seconds to load . i was wondering if there a solution to this

What i have tried so far is is adding few options lke this :

mapOptions = {
zoom: 3,
center: [0, 0],
zoomAnimation: true,
fadeAnimation: true,
preferCanvas: true,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
updateWhenIdle: true,
keepBuffer: 4,
updateWhenZooming: false,
}),
],
};


this also :

mapOptions = {
center: [0, 0],
zoom: 3,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
tileSize: 256,
noWrap: true,
detectRetina: true,
updateWhenIdle: true,
updateWhenZooming: false,
keepBuffer: 4, // Larger buffer for offscreen tiles
}),
],
};

Continue reading...