how to add spinner till content load fully inside dialog box

Question

I'm opening my edit form inside dialog box. but when click on edit button first it load empty bo with submit and cancel button and content load after around 3 seconds. How can I load spinner till content load fully inside dialog box?

mycode

 $("#userTable").on("click", " .edit-page .myHref", function () {
        var $this = $(this);
        var $link = ($this.attr('href'));
        opendialog($link);
        return false;
    });

    function opendialog($link) {

        var $dialog = $('<div id="dialog_edit"></div>')
            .load($link + ' #content_edit')
            .dialog({
                width: 535,
                resizable: false,
                modal: true,
                position: ['center', 100],
                show: {effect: 'fade', duration: 500},
                autoOpen: false,
                title: "Edit User",
                buttons: [
                    {
                        text: "Update",
                        type: "submit",
                        "class": 'updateButtonClass',
                        click: function () {
                            $('.updateButtonClass').submit();
                            toggleSpinner();
                        }
                    },
                    {
                        text: "Cancel",
                        "class": 'saveButtonClass',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ],

            });



        $dialog.ajaxSuccess(function () {


            $("#edit_user select").chosen({
                disable_search: true,
                width: "100%"
            });
            // setTimeout(function(){
            //date-pickers-- Start
            var validCurDate = $('.valid_to').val();
            var activationCurDate = $('.activation_on').val();
            // alert(validCurDate);

            $(".valid_to").datepicker({
                firstDay: 1,
                dateFormat: "yy-mm-dd",
                minDate: activationCurDate,
                onSelect: function (selected) {
                    $('.activation_on').datepicker('option', 'maxDate', selected);
                }
            });

            $(".activation_on").datepicker({

                firstDay: 1,
                dateFormat: "yy-mm-dd",
                maxDate: validCurDate,
                onSelect: function (selected) {
                    $('.valid_to').datepicker('option', 'minDate', selected);
                }
            });

            // Clear datepicker Max/Min-Date the field if empty
            $('.valid_to').change(function () {
                $(".activation_on").datepicker('option', 'maxDate', null);
            });
            $('.activation_on').change(function () {
                $(".valid_to").datepicker('option', 'minDate', null);
            });
        })

            $dialog.dialog('open');