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

Question

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
    }),
  ],
};