class ElementLoader {
    constructor(className = 'loading-element') {
        this.className = className;
        this.observedElements = new Set();
        this.init();
    }

    init() {
        // Mutation Observer for new elements
        const mutationObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.classList?.contains(this.className)) {
                        this.createLoadingEffect(node);
                    }
                });
            });
        });

        mutationObserver.observe(document.body, { 
            childList: true, 
            subtree: true 
        });

        // Initialize loading effect for existing elements
        document.querySelectorAll(`.${this.className}`).forEach(element => {
            this.createLoadingEffect(element);
        });
    }

    createLoadingEffect(element) {
        if (this.observedElements.has(element)) return;
        this.observedElements.add(element);

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        
        canvas.width = element.offsetWidth || element.getAttribute('width') || 300;
        canvas.height = element.offsetHeight || element.getAttribute('height') || 200;
        
        canvas.style.position = 'absolute';
        canvas.style.top = '0';
        canvas.style.left = '0';
        canvas.style.zIndex = '1';
        
        if (getComputedStyle(element).position === 'static') {
            element.style.position = 'relative';
        }
        
        context.fillStyle = '#f9f9f9';
        context.fillRect(0, 0, canvas.width, canvas.height);
        
        let currentLine = 1;
        const loadLineHeight = 8; // Increase line height for faster loading
        
        const animate = () => {
            context.fillStyle = '#f0f0f0';
            context.fillRect(0, currentLine, canvas.width, loadLineHeight);
            currentLine += loadLineHeight;
            
            if (currentLine <= canvas.height) {
                requestAnimationFrame(animate);
            } else {
                canvas.remove();
                element.classList.remove(this.className);
            }
        };
        
        element.appendChild(canvas);
        requestAnimationFrame(animate);
    }
}

// Initialize the loader
new ElementLoader('loading-element');

const style = document.createElement('style');
style.textContent = `
    .loading-element {
        opacity: 0;
        animation: fadeIn 0.3s ease-in forwards;
    }
    
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
`;
document.head.appendChild(style);