fonteva-design-guide/force-app/main/default/lwc/pfmLoader/pfmLoader.js

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import BASE from '@salesforce/resourceUrl/PFM_Base';
import Loader_State_Loading from '@salesforce/label/c.Pfm_Loader_State_Loading';
import Loader_State_Loaded from '@salesforce/label/c.Pfm_Loader_State_Loaded';
import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class PfmLoader extends LightningElement {
    @api full = false;
    @api startOnLoad = false;
    @api identifier;
    @api size; // small, medium, large. default: small
    @track classes;
    @api altText; // deprecated

    _altText = '';
    @api alternateText; // default label for both start and end states if each is not provided a value
    @api alternateTextStart; // label to announce start of loader
    @api alternateTextEnd; // label to announce end of loader

    @api theme;

    @api
    start() {
        const wrapper = this.template.querySelector('.pfm-loader');
        wrapper.classList.add('js-loader');
        this._altText = this.alternateTextStart || this.alternateText || Loader_State_Loading;
    }

    @api
    end() {
        this._altText = this.alternateTextEnd || this.alternateText || Loader_State_Loaded;
        const wrapper = this.template.querySelector('.pfm-loader');
        setTimeout(()=> {
            wrapper.classList.remove('js-loader');
        },1000)
    }

    _show = false;
    @api
    set show(value) {
        this._show = value;
        if (value) {
            this.start();
        } else {
            this.end();
        }
    }

    get show() {
        return this._show;
    }

    disconnectedCallback() {
        unregisterAllListeners(this);
    }

    connectedCallback() {
        registerListener('toggleLoader', this.toggleLoader, this);

        loadStyle(this, BASE + '/css/component/loader/loader.css');

        let valFull = this.full ? ' pfm-loader_full pfm-loader_large' : '',
            valSize = this.size ? ' pfm-loader_' + this.size : ' pfm-loader_small',
            valTheme = this.theme ? ' pfm-loader_background-white' : '';

        this.classes = 'pfm-loader' + valFull + valSize + valTheme;

        if (this.startOnLoad) {
            setTimeout(() => {
                this.start();
            }, 50);
        }
    }

    toggleLoader(evt) {
        if (evt.identifier != null && evt.identifier === this.identifier) {
            if (evt.action != null && evt.action.toLowerCase() === 'start') {
                this.start();
            } else {
                this.end();
            }
        }
    }
}