ALwrity + Wordpress + Wix + GSC integration

frontend/src/components/OnboardingWizard/PersonaStep/PersonaLoadingState.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  Typography,
+  Alert,
+  Card,
+  CardContent,
+  LinearProgress,
+  Fade
+} from '@mui/material';
+import { Psychology as PsychologyIcon } from '@mui/icons-material';
+import { PersonaGenerationProgress } from './PersonaGenerationProgress';
+import { type GenerationStep } from './PersonaGenerationProgress';
+
+interface PersonaLoadingStateProps {
+  showPreview: boolean;
+  isGenerating: boolean;
+  corePersona: any;
+  progress: number;
+  generationStep: string;
+  generationSteps: GenerationStep[];
+  progressMessages: any[];
+  error: string | null;
+  pollingError: string | null;
+  success: string | null;
+  handleRegenerate: () => void;
+  generatePersonas: () => void;
+  setShowPreview: (show: boolean) => void;
+  setSuccess: (message: string | null) => void;
+}
+
+export const PersonaLoadingState: React.FC<PersonaLoadingStateProps> = ({
+  showPreview,
+  isGenerating,
+  corePersona,
+  progress,
+  generationStep,
+  generationSteps,
+  progressMessages,
+  error,
+  pollingError,
+  success,
+  handleRegenerate,
+  generatePersonas,
+  setShowPreview,
+  setSuccess
+}) => {
+  return (
+    <>
+      {/* Safeguard: show loading instead of blank while initial checks run */}
+      {!showPreview && !isGenerating && !corePersona && (
+        <Fade in={true}>
+          <Card sx={{
+            mb: 4,
+            background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+            border: '1px solid #e2e8f0',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05)',
+            borderRadius: 3
+          }}>
+            <CardContent sx={{ p: 4, textAlign: 'center' }}>
+              <Box sx={{ mb: 3 }}>
+                <Box
+                  sx={{
+                    width: 64,
+                    height: 64,
+                    borderRadius: '50%',
+                    background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    mx: 'auto',
+                    mb: 2
+                  }}
+                >
+                  <PsychologyIcon sx={{ fontSize: 32, color: 'white' }} />
+                </Box>
+                <Typography variant="h6" sx={{ fontWeight: 600, color: '#1e293b', mb: 1 }}>
+                  Preparing Persona Workspace
+                </Typography>
+                <Typography variant="body2" sx={{ color: '#64748b' }}>
+                  Checking cache and initializing generation...
+                </Typography>
+              </Box>
+              <LinearProgress
+                sx={{
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: '#e2e8f0',
+                  '& .MuiLinearProgress-bar': {
+                    borderRadius: 3,
+                    background: 'linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%)'
+                  }
+                }}
+              />
+            </CardContent>
+          </Card>
+        </Fade>
+      )}
+
+      {/* Generation Progress */}
+      <PersonaGenerationProgress
+        isGenerating={isGenerating}
+        progress={progress}
+        currentStep={generationStep}
+        generationSteps={generationSteps}
+        progressMessages={progressMessages}
+      />
+
+      {/* Error Display */}
+      {(error || pollingError) && (
+        <Alert severity="error" sx={{ mb: 3 }}>
+          {error || pollingError}
+          <Button 
+            size="small" 
+            onClick={handleRegenerate}
+            sx={{ ml: 2 }}
+          >
+            Try Again
+          </Button>
+        </Alert>
+      )}
+
+      {/* Generate New Button (when cached data is loaded) */}
+      {showPreview && success && success.includes('cached') && (
+        <Alert severity="info" sx={{ mb: 3 }}>
+          {success}
+          <Button 
+            size="small" 
+            onClick={() => {
+              setShowPreview(false);
+              setSuccess(null);
+              generatePersonas();
+            }}
+            sx={{ ml: 2 }}
+          >
+            Generate New
+          </Button>
+        </Alert>
+      )}
+    </>
+  );
+};