Leaflet.markercluster: slow performance when zooming

Question

I am rendering a million geojson data which is the type of Polygon. This gives better performance when render the data. But when zooming the map, gives very slow performance.

How to avoid this issue?

I am using the events zoomstart and zoomend to show the spinner.

This is starting after 6 or 8 seconds. After zooming started, Leaflet.markercluster takes nearly 30 seconds to 1 minutes to complete the zooming.

My Anuglar Directive code:

    (function () {
        'use strict';
        angular.module('leafLet', [])
        .factory('leafLetService', function () {
            var leafLetService = {};
            return leafLetService;
        })
            .directive('leafLet', ['leafLetService', '$timeout', function (leafLetService, $timeout) {
                return {
                    restrict: 'AE',
                    scope: {
                        item: '=leafLet',
                        options: '=?options',
                        events: '=?events',
                        sharingValue: '=?sharingValue'
                    },
                    link: function (scope, $element, attrs, ngModel) {
                        var map = null, myLayer = null;
                        scope.events = scope.events || {};
                        scope.options = {
                            center: null,
                            zoom: null
                        };
                        scope.events.addData = addData;
                        var markers = null;
                        var element = document.getElementById(attrs.attrId);
/**Create a map object**/
                        function createMap() {
                            $(document).ready(function () {
                                $timeout(function () {
                                    map = L.map(attrs.attrId);

                                    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                                        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                    }).addTo(map);

                                    createLayer();
                                    if (scope.events && typeof scope.events['mapCreated'] === "function") {
                                        scope.events['mapCreated']();
                                    }
                                    $(element).hide();
                                }, 0);
                            });

                        }

/**Create the layer and add to the map**/
                        function createLayer() {
                            myLayer = L.geoJSON().addTo(map);
                        }

/**Bind zooming detection for the map**/
                        function onZooming() {
                            map.on("zoomstart", function (e) {
                                map.spin(true);
                            });
                            map.on("zoomend", function (e) { map.spin(false); });
                        }

/**Add geojson data to the existing map. This will help to add data partially to the map**/
                        function addData(geoJsonData) {
                            //myLayer.addData(data);
                            $(element).show();
                            markers = markers || L.markerClusterGroup();

                            var geoJsonLayer = L.geoJson(geoJsonData);
                            markers.addLayer(geoJsonLayer);

                            map.addLayer(markers);
                            map.eachLayer(function (layer) {
                                if (!layer.on) return;

                                layer.on('loading', function (event) {
                                    map.spin(true);
                                });

                                layer.on('load', function (event) {
                                    map.spin(false);
                                });
                            }, this);
                            map.fitBounds(markers.getBounds());

                            onZooming();

                        }

/**Initial function to be called**/
                        function init() {
                            createMap();
                        }

/**Initial function calling.**/
                        init();
                    }
                };
            }]);

    }());