ccm-loading does not disappear

[ghost]

In my component, the cc-loading indicator is visible all the time. This is my code:

(() => {
    const component = {
        name: 'counter-kh',
        ccm: 'https://ccmjs.github.io/ccm/ccm.js',
        config: {
            css: ['ccm.load', '']
        },
        Instance: function () {
            let clicks = 0;
            let count = 0;

            const countDisplay = document.createElement('p');
            const clicksDisplay = document.createElement('p');

            const incrementButton = document.createElement('button');
            const decrementButton = document.createElement('button');
            incrementButton.innerText = '+';
            decrementButton.innerText = '-';
            incrementButton.onclick = () => {clicks++; count++; this.update();};
            decrementButton.onclick = () => {clicks++; count--; this.update();};

            this.update = () => {
                countDisplay.innerText = `count: ${count}`;
                clicksDisplay.innerText = `clicks: ${clicks}`;
            };

            this.start = async () => {
                this.update();
                this.element.appendChild(countDisplay);
                this.element.appendChild(clicksDisplay);
                this.element.appendChild(incrementButton);
                this.element.appendChild(decrementButton);
            };
        }
    };
    let b = "ccm." + component.name + (component.version ? "-" + component.version.join(".") : "") + ".js"; if (window.ccm && null === window.ccm.files[b]) return window.ccm.files[b] = component; (b = window.ccm && window.ccm.components[component.name]) && b.ccm && (component.ccm = b.ccm); "string" === typeof component.ccm && (component.ccm = { url: component.ccm }); let c = (component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/) || ["latest"])[0]; if (window.ccm && window.ccm[c]) window.ccm[c].component(component); else { var a = document.createElement("script"); document.head.appendChild(a); component.ccm.integrity && a.setAttribute("integrity", component.ccm.integrity); component.ccm.crossorigin && a.setAttribute("crossorigin", component.ccm.crossorigin); a.onload = function () { window.ccm[c].component(component); document.head.removeChild(a) }; a.src = component.ccm.url }
})();

[akless]

When the start method is called the first time, this.element only contains the loading icon. If you only append things to this.element, then the loading icon is never overwritten with other content. Before the first appendChild call you can do this.element.innerHTML = ''; to clear all content (that removes the loading icon).

[akless]

Another hint: Your component name is counter-kh. A - is not allowed in a component name. Please avoid it. Maybe use a _ instead.