transition-delay on offcanvas-cart loader about bootscore

[Axos11]

Hello Basti,

first of all thanks for you work and nice dev-theme! I really appreceate your work and am currently doing my first project on bootscore-basis. I have on suggestion for the offcanvas cart loader. The add to cart ajax requests on my server are quite fast (<100ms) and therefore it is quite weird to have a 1s delay on the loader transition.

#offcanvas-cart.show .cart-loader {
transition-delay: 1s;
}

I understand, that that delay should prevent any content flashing but wouldn't it be possible to just add another class to the loader (.loaded) after the ajax request returns and remove the delay completely? That should then work all the time and no content should be flashing.

I hope this is the right place for such suggestions. If not then just point me there please :)

I did a little research on an solution to that issue. Here is my suggestion:

I changed
#offcanvas-cart.show .cart-loader {
opacity: 0;
transition: opacity .3s, visibility .3s;
transition-delay: 1s;
visibility: hidden;
}
to
#offcanvas-cart.show.loaded .cart-loader {
opacity: 0;
transition: opacity .1s, visibility .1s;
transition-delay: 0s;
visibility: hidden;
}

and added

$('body').bind('added_to_cart' , function(){
$('#offcanvas-cart').addClass('loaded');
});

$('body').bind('hidden.bs.offcanvas' , function(){
$('#offcanvas-cart').removeClass('loaded');
});

to woocommerce.js

Changed my approach a little bit to prevent issues on cart opens without adding and speed them up as well:

added
$(document.body).trigger('cart-loading',[]);
right after
$('form.cart').on('submit', function(e) {
e.preventDefault();

and changed the css therefore to:
#offcanvas-cart.show .cart-loader {
opacity: 0;
visibility: hidden;
transition: opacity .1s, visibility .1s;
}

#offcanvas-cart.show.loading .cart-loader {
transition-delay: 0s;
opacity: 1;
transition: opacity .1s, visibility .1s;
visibility: visible;
}

and the js to:
$('body').bind('cart-loading' , function(){
$('#offcanvas-cart').addClass('loading');
console.log("triggered");
});

$('body').bind('added_to_cart' , function(){  
  $('#offcanvas-cart').removeClass('loading');
});

[crftwrk]

Hello @Axos11 ,

thank you very much! I will check that next week and implement it in the theme.

Can you send me your both files woocommerce.js and woocommerce-style.css via mail to store(at)bootscore.me? So, it will be much faster for me to check.

Thank you again. The loader was something which I was struggeling a long time.

[crftwrk]

Hello @Axos11 ,

implemented your code in the theme. I changed a bit of CSS. Now loader is not a fake-loader anymore. Loader only appears if a product is added to the cart. This is a huge improvement, thank you very much for your contribute.

I close this issue now.

Best regards

Basti