Source: components/filter/filter-tree/filter-loading-icon.js

import jQ from 'jquery';

import BaseComponent from "../../base-component";
import Utils from "../../../helpers/utils";
import Settings from "../../../helpers/settings";

/**
 * Loading icon in the middle of the page,
 * shown when the filter is requesting API
 * @extends BaseComponent
 */
class FilterLoadingIcon extends BaseComponent {
	getTemplate() {
		return `
			<div class="boost-pfs-filter-loading" style="display: none;"><span class="boost-pfs-filter-loading-icon"></span></div>
		`;
	}

	compileTemplate() {
		return this.getTemplate();
	}

	/**
	 * Set whether the icon will be shown or not.
	 * This also checks if the setting 'showLoading' is enabled before showing the icon.
	 * @param isShow
	 */
	setShow(isShow) {
		if (!this.$element) {
			this.$element = jQ(this.compileTemplate());
			jQ('body').append(this.$element);
		}
		
		if (this.isEnabled()) {
			if (isShow) {
				this.$element.show();
			} else {
				this.$element.hide();
			}
		}
	}

	/**
	 * Check the setting if loading icon is enabled or not
	 * @returns {boolean}
	 */
	isEnabled() {
		var isMobile = Utils.isMobile();
		return (!isMobile && Settings.getSettingValue('general.showLoading')) || (isMobile && Settings.getSettingValue('general.showMobileLoading'));
	}
}
export default FilterLoadingIcon;