PREVIEW_FIX_PROGRESS.md

Preview Fix Progress - CRITICAL BLANK PREVIEW ISSUE

Problem Identified

The preview component was completely blank - not showing starter HTML or any HTML after AI generation.

Root Causes Found

1. Complex dual iframe system with conditional srcDoc logic was preventing basic rendering
2. Overly complex update logic was blocking initial HTML display
3. Iframe visibility logic had too many conditions that could result in no iframe being visible
4. srcDoc conditional assignment meant iframes could have empty content even when HTML was available

COMPLETED Fixes ✅

1. Simplified HTML Update Logic

• BEFORE: Complex injection system with debouncing and conditional updates
• AFTER: Always update displayHtml immediately when html prop changes
• RESULT: Ensures content always shows, regardless of AI state

2. Fixed Iframe srcDoc Logic

• BEFORE: srcDoc={activeIframeIndex === 0 ? displayHtml : ''} (could be empty!)
• AFTER: srcDoc={displayHtml} (always has content)
• RESULT: Both iframes always get the latest HTML content

3. Simplified Iframe Visibility

• BEFORE: Complex opacity logic with swapping states that could hide all iframes
• AFTER: Simple activeIframeIndex-based visibility
• RESULT: Exactly one iframe is always visible

4. Streamlined onLoad Handlers

• BEFORE: Complex conditional logic in onLoad handlers
• AFTER: Simple, reliable onLoad handling
• RESULT: Faster loading, fewer edge cases

Technical Changes Made

/components/editor/preview/index.tsx

// OLD: Complex conditional update logic
useEffect(() => {
  if (!isAiWorking) {
    // Try injection first...
    const success = injectContentSeamlessly(html, true);
    if (!success) setDisplayHtml(html);
  }
  // Complex debouncing and conditions...
}, [html, isAiWorking, injectContentSeamlessly, swapIframes]);

// NEW: Simple, reliable update logic
useEffect(() => {
  // ALWAYS update displayHtml immediately
  setDisplayHtml(html);
  prevHtmlRef.current = html;
  
  // Simple loading state for streaming
  if (isAiWorking) {
    setIsLoading(true);
    setTimeout(() => setIsLoading(false), 200);
  } else {
    setIsLoading(false);
  }
}, [html, isAiWorking]);

Iframe srcDoc Assignment

// OLD: Conditional content that could be empty
srcDoc={activeIframeIndex === 0 ? displayHtml : ''}
srcDoc={activeIframeIndex === 1 ? displayHtml : secondaryHtml}

// NEW: Always shows current content
srcDoc={displayHtml}
srcDoc={displayHtml}

Expected Results

1. ✅ Initial HTML Display: Preview should now show the defaultHTML immediately on page load
2. ✅ AI-Generated Content: Preview should update to show AI-generated HTML
3. ✅ No More Blank Screen: The preview should never be completely blank
4. ✅ Reduced Flashing: Simpler logic should reduce visual artifacts

Still Maintains

• Dual iframe system for smooth transitions (when working)
• Loading states during AI generation
• Edit mode functionality
• Responsive design
• All existing props and APIs

Testing Required

• Load fresh project - should show defaultHTML
• Generate content with AI - should show updated HTML
• Verify no console errors
• Test edit mode still works
• Verify smooth updates during streaming

Next Steps if Issues Remain

1. Check console logs for iframe loading
2. Verify defaultHTML is valid
3. Test with simplified single iframe if dual system still problematic
4. Check CSS rules that might hide content

Files Modified

• /components/editor/preview/index.tsx - Core preview component fixes