agentsqripts/lib/ui-problems/loadingStateDetector.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Loading state detector
 * @description Detects missing loading states for async operations
 */

const { UI_PROBLEM_PATTERNS } = require('./uiProblemPatterns');

/**
 * Detects missing loading states for async operations
 * @param {string} content - File content
 * @param {string} filePath - Path to the file
 * @returns {Array} Array of loading state issues
 */
function detectMissingLoadingStates(content, filePath) {
  const issues = [];
  
  const asyncPatterns = [
    /\bfetch\s*\(/g,
    /axios\.[get|post|put|delete|patch]/g,
    /\.(get|post|put|delete|patch)\s*\(/g,
    /async\s+function/g,
    /useEffect.*async/g,
    /\.then\s*\(/g
  ];
  
  const loadingIndicators = [
    /loading/gi,
    /spinner/gi,
    /CircularProgress/gi,
    /Skeleton/gi,
    /isLoading/gi,
    /pending/gi,
    /fetching/gi
  ];
  
  const hasAsyncOperations = asyncPatterns.some(pattern => pattern.test(content));
  const hasLoadingStates = loadingIndicators.some(pattern => pattern.test(content));
  
  if (hasAsyncOperations && !hasLoadingStates) {
    const patternInfo = UI_PROBLEM_PATTERNS['missing_loading_states'];
    
    // Find specific async operations
    const asyncOperations = [];
    asyncPatterns.forEach((pattern, index) => {
      const matches = content.match(pattern);
      if (matches) {
        asyncOperations.push({
          type: ['fetch', 'axios', 'http', 'async function', 'useEffect async', 'promise'][index],
          count: matches.length
        });
      }
    });
    
    issues.push({
      type: 'missing_loading_states',
      severity: patternInfo.severity,
      category: patternInfo.category,
      location: filePath,
      asyncOperations: asyncOperations,
      summary: `Async operations detected without loading states`,
      recommendation: `Add loading indicators (spinner, skeleton, progress bar) for better user experience`,
      effort: patternInfo.effort,
      impact: patternInfo.impact,
      examples: [
        'const [loading, setLoading] = useState(false)',
        '{loading ? <Spinner /> : <Content />}',
        'Add isLoading state management'
      ]
    });
  }
  
  return issues;
}

module.exports = {
  detectMissingLoadingStates
};