Показать анимацию до момента отправки заказа Новый

Дополнение: minishop2

Здравствуйте!
После нажатия на кнопку отправки заказа ([!msOrder?]]) до момента уведомления об успешном заказе ([[!msGetOrder]]) на сайте проходит примерно 2 секунды, подскажите пожалуйста, как добавить в этот промежуток времени показ какой-нибудь анимации (гифки, например), клиенту, чтоб не было возможности нажать кнопку отправки заказа 100500 раз?

Может посоветуете другие варианты решения проблемы? Оптимизация работы дополнения или запрет отправки нескольких заказов в течение 5 секунд?

Вызываю сниппеты в шаблоне корзины.
[[!msCart?tpl=`my.tpl.msCart`]]
[[!msOrder?tpl=`my.tpl.msOrder`]]
[[!msGetOrder?tpl=`my.tpl.msGetOrder`]]

Чанки:

my.tpl.msCart
<div id="msCart">
    {if !count($products)}
        {'ms2_cart_is_empty' | lexicon}
    {else}
			<div class="table-responsive cart_info">
				<table class="table table-condensed">
					<thead>
						<tr class="cart_menu">
							<td class="image">Товар</td>
							<td class="description"></td>
							<td class="price">Цена</td>
							<td class="quantity">{'ms2_cart_count' | lexicon}</td>
							<td class="total">{'ms2_cart_remove' | lexicon}</td>
						</tr>
 					</thead>
					<tbody>
                {foreach $products as $product}
                    <tr id="{$product.key}">
                        <td class="cart_product">
                            {if $product.thumb?}
                                <img src="{$product.thumb}" alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
                            {else}
                                <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
                                     srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
                                     alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
                            {/if}
                        </td>
                        <td class="cart_description">
                            {if $product.id?}
                                <h4><a href="{$product.id | url}">{$product.pagetitle}</a></h4>
								<p>Код на сайте: {$product.id}</p>
                            {else}
                                {$product.name}
                            {/if}
                            {if $product.options?}
                                <div class="small">
                                    {$product.options | join : '; '}
                                </div>
                            {/if}
                        </td>
                        <td class="cart_price">
                            <p>{$product.price} {'ms2_frontend_currency' | lexicon}</p>
                        </td>
                        <td class="cart_quantity count">
                            <form method="post" class="ms2_form form-inline" role="form">
                                <input type="hidden" name="key" value="{$product.key}"/>
                                <div class="form-group">
                                    <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change" onClick="jQuery('#qw').val(parseInt(jQuery('#qw').val())-1);">
                                        -
                                    </button>
                                    <input type="number" pattern="^[1-9]+$*" min="1" id="qw" class="cart_quantity_input input-sm form-control" name="count" value="{$product.count}"/>
                                    <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change" onClick="jQuery('#qw').val(parseInt(jQuery('#qw').val())+1);">
                                        +
                                    </button>
                                </div>
                            </form>
                        </td>
                        <td class="cart_delete">
                            <form method="post" class="ms2_form">
                                <input type="hidden" name="key" value="{$product.key}">
                                <button class="cart_quantity_delete" type="submit" name="ms2_action" value="cart/remove">
                                    <i class="fa fa-times"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {/foreach}

                <tr class="footer">
                    <td class="total" colspan="2"><h4>{'ms2_cart_total' | lexicon}:</h4></td>
                    <td class="total_count">
                        	<span class="cart_total_price ms2_total_cost">{$total.cost}
                        {'ms2_frontend_currency' | lexicon}</span>
                    </td>
                    <td class="total_weight">
                        	<span class="cart_total_price ms2_total_count">{$total.count}
                        {'ms2_frontend_count_unit' | lexicon}</span>
                    </td>
                    <td class="total_cost">
        <form method="post">
            <button class="btn btn-default" type="submit" name="ms2_action" value="cart/clean">
                <i class="glyphicon glyphicon-remove"></i> Очистить
            </button>
        </form>
                    </td>
                    <td> </td>
                </tr>
					</tbody>
            </table>
        </div>
    {/if}
</div>
my.tpl.msOrder
<div class="shopper-informations container">
<div class="row">
<div class="col-md-12">
<div class="shopper-info">
<p>Информация о покупателе</p>
<div class="status alert alert-success" style="display: none"></div>
<form class="ms2_form contact-form row" method="post">
                    {foreach $deliveries as $delivery index=$index}
                        {var $checked = !$order.delivery && $index == 0 || $delivery.id == $order.delivery}
                        <div class="checkbox">
                            <label class="delivery input-parent">
                                <input type="hidden" name="delivery" value="{$delivery.id}" id="delivery_{$delivery.id}"
                                       data-payments="{$delivery.payments | json_encode}"
                                        {$checked ? 'checked' : ''}>
                            </label>
                        </div>
                    {/foreach}
            {foreach ['receiver','email','phone'] as $field}
                 <div class="form-group col-md-4">
                        <input type="text" id="{$field}" placeholder="{('ms2_frontend_' ~ $field) | lexicon}"
                               name="{$field}" value="{$form[$field]}"
                               class="form-control{($field in list $errors) ? ' error' : ''}"
                               required="required">

                </div>
            {/foreach}
				<div class="col-sm-12">
						<div class="buy col-sm-6 col-md-offset-6">
							<button class="btn btn-fefault cart ms2_link" type="submit" name="ms2_action" value="order/submit">Подтвердить заказ</button>
						</div>
				</div>
</form>
</div>
</div>
</div>
</div>
my.tpl.msGetOrder
<p class="title text-center">
        Спасибо! Ваш заказ на сумму:
        {if $total.delivery_cost}
            {$total.cart_cost} {'ms2_frontend_currency' | lexicon} + {$total.delivery_cost}
            {'ms2_frontend_currency' | lexicon} =
        {/if}
        <strong>{$total.cost}</strong> {'ms2_frontend_currency' | lexicon}
        ПОДТВЕРЖДЕН!
    </p>
        <p class="title text-center">В ближайшее время с Вами свяжется наш менеджер.</p>
Буду благодарен за любую подсказку!
14 июля 2017, 22:25    Павел Мезенцев   
4    154 0

Комментарии (3)

  1. Павел Мезенцев 15 июля 2017, 17:19 # +1
    Пока что изыскания привели только к одному способу — калбаки=)
    <script>
    	miniShop2.Callbacks.Order.submit.before = function() {
        		miniShop2.Message.success('Заказ обрабатывается!');
        		return true;
    	}
    </script>
    
    1. Павел Мезенцев 15 июля 2017, 17:50 # 0
      В общем, остановился на этом способе, чуточку приукрасил:
      В шаблон корзинки добавил в тело странички:
      <div id="before-load">
        <!-- Иконка Font Awesome -->
        <i class="fa fa-spinner fa-spin"></i>
      </div>
      
      Стили для блока:
      #before-load {
          display: none;
        position: fixed; /*фиксированное положение блока*/
        left: 0; /*положение элемента слева*/
        top: 0; /*положение элемента сверху*/
        right: 0; /*положение элемента справа*/
        bottom: 0; /*положение элемента снизу*/
        background: #fff; /*цвет заднего фона блока*/
        z-index: 1001; /*располагаем его над всеми элементами на странице*/
      }
      #before-load i {
        font-size: 70px; /*размер иконки*/
        position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/
        left: 50%; /*слева 50% от ширины родительского блока*/
        top: 50%; /*сверху 50% от высоты родительского блока*/
        margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/
      }
      
      И вызов скрипта после

      <script>
          miniShop2.Callbacks.Order.submit.before = function() {
              //miniShop2.Message.info('Заказ обрабатывается!');
               $('#before-load').find('i').fadeIn().end().delay(400).fadeIn('slow');
              return true;
          }
      </script>
      
      За лоадер спасибо этому сайту https://itchief.ru/lessons/javascript/preloader-for-site
      1. Павел Мезенцев 16 июля 2017, 07:57 # 0
        «И вызов скрипта после...»
        тут должен был быть вызов дефолтного скрипта минишоп2, то есть — калбэк вызывать после
        <script type="text/javascript" src="/assets/components/minishop2/js/web/default.js?v=******"></script>
        
    Вы должны авторизоваться, чтобы оставлять комментарии.