src/components/LoadingState.tsx

tsx
import React from 'react'
import { Sparkles, Zap, Brain } from 'lucide-react'

/**
 * Loading component with animated optimization process
 */
export function LoadingState() {
  return (
    <div className="card p-8">
      <div className="text-center space-y-6">
        {/* Animated Icon */}
        <div className="relative mx-auto w-16 h-16">
          <div className="absolute inset-0 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full animate-pulse"></div>
          <div className="absolute inset-2 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center">
            <Sparkles className="w-8 h-8 text-primary-600 dark:text-primary-400 animate-spin" />
          </div>
        </div>

        {/* Loading Text */}
        <div className="space-y-2">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
            Prompt wird optimiert...
          </h3>
          <p className="text-gray-600 dark:text-gray-400">
            Unser KI-System analysiert und verbessert deinen Prompt
          </p>
        </div>

        {/* Progress Steps */}
        <div className="space-y-4 max-w-md mx-auto">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                </svg>
              </div>
              <span className="text-sm text-gray-700 dark:text-gray-300">Prompt analysieren</span>
            </div>
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center animate-pulse">
                <Brain className="w-3 h-3 text-white" />
              </div>
              <span className="text-sm text-gray-700 dark:text-gray-300">KI-Strategien anwenden</span>
            </div>
            <div className="w-2 h-2 bg-primary-500 rounded-full animate-pulse"></div>
          </div>

          <div className="flex items-center justify-between opacity-50">
            <div className="flex items-center space-x-3">
              <div className="w-6 h-6 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
              <span className="text-sm text-gray-500 dark:text-gray-400">Optimierung abschließen</span>
            </div>
            <div className="w-2 h-2 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
          </div>
        </div>

        {/* Estimated Time */}
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
          <div className="flex items-center justify-center space-x-2 text-blue-700 dark:text-blue-300">
            <Zap className="w-4 h-4" />
            <span className="text-sm font-medium">Geschätzte Zeit: 1-3 Sekunden</span>
          </div>
        </div>

        {/* Tips */}
        <div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
          <p>💡 Unsere Optimierung berücksichtigt:</p>
          <p>• KI-spezifische Best Practices</p>
          <p>• Struktur und Klarheit</p>
          <p>• Effektivität und Spezifität</p>
        </div>
      </div>
    </div>
  )
}

</html>