title: How to show loading image while product list still loading in prestashop
body: <p>The file which responsible for loading product list is product-list.tpl and i need to edit product-list.tpl (prestashop/modules/product-list.tpl) to show loading image until product list fully loaded.</p>
  
  <p>The <code>tag</code> of responsible for loading product list located under <code>&lt;!-- Products list --&gt;</code> exact on:</p>
  
  <pre><code>&lt;ul{if isset($id) &amp;&amp; $id} id="{$id}" {/if} class="product_list grid row{if isset($class) &amp;&amp; $class} {$class}{/if}{if isset($active) &amp;&amp; $active == 1} active{/if} not-animated" data-animate="fadeInLeft" data-delay="200"&gt;
  {foreach from=$products item=product name=products}
      {math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
  </code></pre>
  
  <p>the full code is here: <a href="https://pastebin.com/uLb1Hkaf" rel="nofollow noreferrer">uLb1Hkaf</a></p>
  
  <p>I tried many JavaScript / jquery / ajax methods but no luck.
  So guys please help me to add JavaScript / jquery / ajax showing loading image while still <code>&lt;ul&gt;</code> not loaded.</p>