How to show loading image while product list still loading in prestashop

Question

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.

The tag of responsible for loading product list located under <!-- Products list --> exact on:

<ul{if isset($id) && $id} id="{$id}" {/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if} not-animated" data-animate="fadeInLeft" data-delay="200">
{foreach from=$products item=product name=products}
    {math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}

the full code is here: uLb1Hkaf

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 <ul> not loaded.

Answer 1

Okay guys, i found a solution by using this example here.

Many thanks for all.