function createSkeleton(originalElement, classToAdd = 'skeleton') {

    //Check exsisiting skeleton
    if (originalElement.nextSibling) {
        const exsistingClass = originalElement.nextSibling.classList && originalElement.nextSibling.classList.contains(classToAdd);
        if (exsistingClass) {
            return originalElement.nextSibling;
        }
    }
    // Create a new div element that will serve as the skeleton
    const skeleton = document.createElement('div');
    // add a attribute to the skeleton to identify it as a
    skeleton.setAttribute('data-skeleton-item', '');

    // Copy all classes from the original element
    skeleton.className = originalElement.className;
  
    // Copy computed styles from the original element
    const computedStyle = window.getComputedStyle(originalElement);
  
  
    // Apply the skeleton class for additional styling (like shimmer effect)

    //only add to elements with attribute data-skeleton, value does not matter
    if (originalElement.hasAttribute('data-skeleton')) {
        skeleton.classList.add(classToAdd);
    }
    // Set the width and height to match the original
    skeleton.style.width = computedStyle.width;
    skeleton.style.height = computedStyle.height;
  
    // Clear any inner content if needed
    skeleton.textContent = '';
  
    // If the original has children, apply a basic skeleton to each child
    Array.from(originalElement.children).forEach(child => {
        skeleton.appendChild(createSkeleton(child, classToAdd)); // Recursive call for child elements
    });
  
    return skeleton;
  }
  
  export function skelaton(original, showSkeleton = true, classToAdd = 'skeleton') {
    if (showSkeleton) {
        const skeleton = createSkeleton(original, classToAdd);
        original.style.display = 'none'; // Hide the original element
        original.parentNode.insertBefore(skeleton, original.nextSibling); // Insert skeleton after the original
        return skeleton; // Return the skeleton in case it needs to be removed later
    } else {
        original.style.display = ''; // Show the original element 
        if (original.nextSibling && original.nextSibling.classList.contains('skeleton') || original.nextSibling.hasAttribute('data-skeleton-item')) {
            original.parentNode.removeChild(original.nextSibling); // Remove the skeleton
        }
    }
  }