When multiple instances of the same template the (remove) hook is applied only to the one of the elements

[spiotr12]

When multiple instances of the same template the (remove) hook is applied only to the one of the elements. It seems to do it for the first one.

I've created loading indicator which I want to transition away when subscriptions are done. I works very well when I have only one instance of my template. however when I have two, my transition is only applied to one of them.

Thanks a lot for help!

Below you can find my loading indicator

<template name="loading_indicator">
    <div class="loading {{ inText }} {{ size }}">
        <img class="loading-img" src="/icons/loading/{{ style }}.svg">
    </div>
</template>

import { Template } from 'meteor/templating';
import './loading.element.html';

Template.loading_indicator.helpers({
	style(){
		const style = Template.instance().data.style;
		if (style) {
			return style;
		} else {
			// default gears
			return "gears";
		}
	},
	size(){
		const size = Template.instance().data.size;
		if (size) {
			return "loading-" + size;
		} else {
			// default md
			return "loading-md";
		}
	},
	inText(){
		const inText = Template.instance().data.inText;
		if (inText) {
			return "loading-in-text";
		} else {
			return "loading-not-in-text";
		}
	}
});

Template.loading_indicator.uihooks({
	'.loading': {
		remove: function (node, template) {
			console.log(template);
			$(node).fadeOut(750, function () {
				$(this).remove();
			});
		}
	}
});