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

its little messy. Please reformat & post complete snap of your code. one thing you can do is, instead of loading full product list on page load; load it using ajax. Run a js function (to execute ajax code for product list) after page is fully loaded to show product list. In ajax beforsend method you can show loading image untill the product list is generating. Once product list generated in ajax success append it to UL tag.

Answer 2

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

Many thanks for all.