imporve browse page perfomance

static/js/base.js

@@ -1,5 +1,43 @@
 // Player status bar functionality - Updated to fix logMessage errors
 
+// Pattern files cache for improved performance
+let patternFilesCache = null;
+let patternFilesCacheTimestamp = null;
+const PATTERN_CACHE_EXPIRY = 30000; // 30 seconds cache
+
+// Function to get cached pattern files or fetch fresh data
+async function getCachedPatternFiles(forceRefresh = false) {
+    const now = Date.now();
+
+    // Check if cache is valid and not forced to refresh
+    if (!forceRefresh && patternFilesCache && patternFilesCacheTimestamp &&
+        (now - patternFilesCacheTimestamp) < PATTERN_CACHE_EXPIRY) {
+        return patternFilesCache;
+    }
+
+    try {
+        const response = await fetch('/list_theta_rho_files');
+        if (!response.ok) {
+            throw new Error(`Failed to fetch pattern files: ${response.status}`);
+        }
+
+        const files = await response.json();
+        patternFilesCache = files;
+        patternFilesCacheTimestamp = now;
+        return files;
+    } catch (error) {
+        console.error('Error fetching pattern files:', error);
+        // Return cached data if available, even if expired
+        return patternFilesCache || [];
+    }
+}
+
+// Function to invalidate pattern files cache
+function invalidatePatternFilesCache() {
+    patternFilesCache = null;
+    patternFilesCacheTimestamp = null;
+}
+
 // Helper function to normalize file paths for cross-platform compatibility
 function normalizeFilePath(filePath) {
     if (!filePath) return '';
@@ -905,9 +943,8 @@ function initializeCacheAllPrompt() {
 
 async function startCacheAllProcess() {
     try {
-        // Get list of patterns
-        const response = await fetch('/list_theta_rho_files');
-        const patterns = await response.json();
+        // Get list of patterns using cached function
+        const patterns = await getCachedPatternFiles();
         
         if (!patterns || patterns.length === 0) {
             throw new Error('No patterns found');

static/js/image2sand-init.js

@@ -166,7 +166,10 @@ async function saveConvertedPattern() {
             const fileInput = document.getElementById('upload_file');
             const finalFileName = 'custom_patterns/' + thrFileName;
             logMessage(`Image converted and saved as ${finalFileName}`, LOG_TYPE.SUCCESS);
-            
+
+            // Invalidate pattern files cache to include new file
+            invalidatePatternFilesCache();
+
             // Close the converter dialog
             closeImageConverter();
 
@@ -386,9 +389,7 @@ async function loadThetaRhoFiles() {
 
     try {
         // Fetch the file list from your backend
-        const response = await fetch('/list_theta_rho_files');
-        if (!response.ok) throw new Error('Failed to fetch file list');
-        const files = await response.json();
+        const files = await getCachedPatternFiles();
 
         // Populate the list
         files.forEach(filename => {

static/js/index.js

@@ -647,8 +647,7 @@ async function loadPatterns(forceRefresh = false) {
         
         // First load basic patterns list for fast initial display
         logMessage('Fetching basic patterns list from server', LOG_TYPE.DEBUG);
-        const basicResponse = await fetch('/list_theta_rho_files');
-        const basicPatterns = await basicResponse.json();
+        const basicPatterns = await getCachedPatternFiles();
         const thrPatterns = basicPatterns.filter(file => file.endsWith('.thr'));
         logMessage(`Received ${thrPatterns.length} basic patterns from server`, LOG_TYPE.INFO);
         
@@ -1107,7 +1106,10 @@ function setupPreviewPanelEvents(pattern) {
                 if (result.success) {
                     logMessage(`Pattern deleted successfully: ${pattern}`, LOG_TYPE.SUCCESS);
                     showStatusMessage(`Pattern "${pattern.split('/').pop()}" deleted successfully`);
-                    
+
+                    // Invalidate pattern files cache
+                    invalidatePatternFilesCache();
+
                     // Clear from in-memory caches
                     previewCache.delete(pattern);
                     imageCache.delete(pattern);
@@ -1642,11 +1644,14 @@ function setupUploadEventHandlers() {
                     const result = await response.json();
                     if (result.success) {
                         successCount++;
-                        
+
+                        // Invalidate pattern files cache to include new file
+                        invalidatePatternFilesCache();
+
                         // Clear any existing cache for this pattern to ensure fresh loading
                         const newPatternPath = `custom_patterns/${file.name}`;
                         previewCache.delete(newPatternPath);
-                        
+
                         logMessage(`Successfully uploaded: ${file.name}`, LOG_TYPE.SUCCESS);
                     } else {
                         failCount++;

static/js/playlists.js

@@ -1041,12 +1041,7 @@ async function loadAvailablePatterns(forceRefresh = false) {
     try {
         // First load basic patterns list for fast initial display
         logMessage('Fetching basic patterns list from server', LOG_TYPE.DEBUG);
-        const basicResponse = await fetch('/list_theta_rho_files');
-        if (!basicResponse.ok) {
-            throw new Error('Failed to load available patterns');
-        }
-        
-        const patterns = await basicResponse.json();
+        const patterns = await getCachedPatternFiles();
         const thrPatterns = patterns.filter(file => file.endsWith('.thr'));
         availablePatterns = [...thrPatterns];
         filteredPatterns = [...availablePatterns];

static/js/settings.js

@@ -171,7 +171,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         fetch('/list_serial_ports').then(response => response.json()).catch(() => []),
         
         // Load available pattern files for clear pattern selection
-        fetch('/list_theta_rho_files').then(response => response.json()).catch(() => []),
+        getCachedPatternFiles().catch(() => []),
         
         // Load current custom clear patterns
         fetch('/api/custom_clear_patterns').then(response => response.json()).catch(() => ({ custom_clear_from_in: null, custom_clear_from_out: null })),