plugin assets sync

autocart_assets/js/index.js

@@ -21,10 +21,22 @@ function sendReq() {
         'autocart_nonce': jQuery('#autocart_nonce').val(),
     };
     const vehiclesContainer = document.querySelector('.vehicles-container');
-    vehiclesContainer.textContent = 'Loading...';
+    // vehiclesContainer.textContent = 'Loading...';
+    // Add skeleton cards to the vehicles container
+    for (let i = 0; i < 6; i++) {
+        const skeletonCard = createSkeletonCard();
+        vehiclesContainer.appendChild(skeletonCard);
+    }
 
     const filtersContainer = document.querySelector('.make-container');
-    filtersContainer.textContent = 'Loading...';
+    for (let i = 0; i < 2; i++) {
+        const skeletonListItem = createSkeletonListItem();
+        filtersContainer.appendChild(skeletonListItem);
+    }
+    // Add skeleton list item to the filters container
+    // const skeletonListItem = createSkeletonListItem();
+    // filtersContainer.appendChild(skeletonListItem);
+
     jQuery.ajax({
         type: 'POST',
         url: ajax_object.ajax_url,
@@ -274,8 +286,40 @@ function updateMileage() {
 // Create debounced versions of sendReq
 const debouncedSendReq = debounce(sendReq, 300);
 
+function createSkeletonCard() {
+    const skeletonCard = document.createElement('div');
+    skeletonCard.classList.add('bg-red-200', 'rounded-lg', 'shadow-md', 'animate-pulse');
+  
+    const innerHTML = `
+      <div class="h-40 bg-red-300 rounded-t-lg"></div>
+      <div class="p-4">
+        <div class="h-12 bg-red-300 rounded-t-lg"></div>
+        <div class="h-5 bg-red-400 rounded-t-lg"></div>
+        <div class="h-5 bg-red-300 rounded-t-lg"></div>
+        <div class="h-5 bg-red-400 rounded-t-lg"></div>
+        <div class="h-5 bg-red-300 rounded-b-lg"></div>
+      </div>
+    `;
+  
+    skeletonCard.innerHTML = innerHTML;
+  
+    return skeletonCard;
+  }
 
 
+function createSkeletonListItem() {
+    const listItem = document.createElement('li');
+    listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
 
+    const innerHTML = `
+    <div class="flex items-center   justify-between p-1">
+        <div class="h-6 bg-custom-red-light w-2/3 rounded-lg"></div>
+        
+        <div class="bg-custom-red-light w-1/6 h-6 rounded-lg"></div>
+    </div>
+    `;
 
+    listItem.innerHTML = innerHTML;
 
+    return listItem;
+}