Source: components/instant-search/instant-search-block/instant-search-result-block-loading.js

import jQ from "jquery";

import BaseComponent from "../../base-component";
import Class from "../../../helpers/class";
import Settings from "../../../helpers/settings";

/**
 * Instant search result - Loading block
 * @extends BaseComponent
 */
class InstantSearchResultBlockLoading extends BaseComponent {
	/**
	 * @constructs
	 */
	constructor() {
		super();
		/**
		 * This is jQuery object and contains the DYM-DOM as well
		 * @type {Object}
		 */
		this.$element = null;
	}

	/**
	 * Get HTML template for Loading block
	 */
	getTemplate() {
		return `
			<li class="{{class.searchSuggestionLoading}}">
				<ul>
					<li>
						<div class="{{class.searchSuggestionLoading}}-img"></div>
					</li>
					<li>
						<div class="{{class.searchSuggestionLoading}}-img"></div>
					</li>
					<li>
						<div class="{{class.searchSuggestionLoading}}-img"></div>
					</li>
				</ul>
			</li>
		`;
	}

	/**
	 * Compile data for Loading template
	 * @returns {String} HTML string (include result data)
	 */
	compileTemplate() {
		return this.getTemplate()
			.replace(/{{class.searchSuggestionLoading}}/g, Class.searchSuggestionLoading);
	}

	/**
	 * Returns whether or not the 'showSuggestionLoading' setting is enabled
	 * @returns {Boolean} true OR false from settings
	 */
	isRender() {
		return Settings.getSettingValue('search.showSuggestionLoading');
	}

	/**
	 * Render Loading block
	 * @returns {Object} jQuery object
	 */
	render() {
		this.$element = jQ(this.compileTemplate());
	}
}

export default InstantSearchResultBlockLoading;