@@ -823,11 +823,8 @@ function wp_allstars_settings_page() {
-
@@ -843,9 +840,13 @@ function wp_allstars_settings_page() {
transform: translateY(0);
}
}
- .wpa-load-more .spinner.is-active {
+ .wpa-loading-indicator .spinner {
+ float: none;
visibility: visible;
- display: inline-block;
+ }
+ /* Hide duplicate plugin counts */
+ .plugin-install-php .subsubsub {
+ display: none;
}
@@ -855,17 +856,16 @@ function wp_allstars_settings_page() {
var isLoading = false;
var currentCategory = '';
var currentOffset = 0;
- var batchSize = 5;
+ var batchSize = 10;
+ var hasMorePlugins = true;
+ var loadingObserver;
function loadPlugins(category, offset = 0, append = false) {
- if (isLoading) return;
+ if (isLoading || !hasMorePlugins) return;
isLoading = true;
- // Show loading indicator in load more button if appending
- if (append) {
- $('.wpa-load-more .spinner').addClass('is-active');
- $('.wpa-load-more button').prop('disabled', true);
- }
+ // Show loading indicator
+ $('.wpa-loading-indicator').show();
// Cancel previous request if it exists
if (currentRequest) {
@@ -892,19 +892,24 @@ function wp_allstars_settings_page() {
// Append new content with staggered animation
var $content = $(response.data.html);
+
+ // Remove duplicate counts from new content
+ $content.find('.subsubsub').remove();
+
+ // Add animation delay to new cards
$content.find('.plugin-card').each(function(index) {
$(this).css('animation-delay', (index * 0.1) + 's');
});
$('#wpa-plugin-list').append($content);
- // Update offset and check if we need to show load more button
+ // Update offset and check if we have more plugins
currentOffset = response.data.offset;
+ hasMorePlugins = response.data.remaining > 0;
- if (response.data.remaining > 0) {
- $('.wpa-load-more').show();
- } else {
- $('.wpa-load-more').hide();
+ // Hide loading indicator if no more plugins
+ if (!hasMorePlugins) {
+ $('.wpa-loading-indicator').hide();
}
} else {
console.error('Server returned error:', response);
@@ -915,12 +920,36 @@ function wp_allstars_settings_page() {
},
complete: function() {
isLoading = false;
- $('.wpa-load-more .spinner').removeClass('is-active');
- $('.wpa-load-more button').prop('disabled', false);
+ if (hasMorePlugins) {
+ setupIntersectionObserver();
+ }
}
});
}
+ function setupIntersectionObserver() {
+ // Disconnect previous observer if it exists
+ if (loadingObserver) {
+ loadingObserver.disconnect();
+ }
+
+ // Create new observer
+ loadingObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting && !isLoading && hasMorePlugins) {
+ loadPlugins(currentCategory, currentOffset, true);
+ }
+ });
+ }, {
+ root: null,
+ rootMargin: '100px',
+ threshold: 0.1
+ });
+
+ // Observe the loading indicator
+ loadingObserver.observe($('.wpa-loading-indicator')[0]);
+ }
+
// Load initial batch of plugins
loadPlugins(currentCategory);
@@ -929,6 +958,7 @@ function wp_allstars_settings_page() {
e.preventDefault();
var category = new URLSearchParams($(this).attr('href').split('?')[1]).get('category');
currentCategory = category;
+ hasMorePlugins = true;
// Update URL without page reload
var newUrl = $(this).attr('href');
@@ -941,11 +971,6 @@ function wp_allstars_settings_page() {
// Load new category
loadPlugins(category);
});
-
- // Handle load more button clicks
- $('.wpa-load-more button').on('click', function() {
- loadPlugins(currentCategory, currentOffset, true);
- });
});