PREVIEW_WHITE_PAGE_FIX.md

Preview White Page Fix

Problem Identified

The preview was showing a completely white page instead of displaying HTML content, including the starter HTML code.

Root Causes Found

1. Critical iframe srcDoc Logic Error

• Primary iframe: srcDoc={activeIframeIndex === 0 ? displayHtml : ''}
  • When activeIframeIndex was 0, it showed content
  • When activeIframeIndex was NOT 0, it showed empty string ❌
• Secondary iframe: srcDoc={activeIframeIndex === 1 ? displayHtml : secondaryHtml}
  • Only worked when activeIframeIndex was 1
  • secondaryHtml started as empty string ❌

2. Empty Secondary HTML State

• secondaryHtml was initialized as empty string ''
• This meant the secondary iframe never had content

3. Complex Update Logic Interference

• Over-complicated update flow prevented basic HTML display
• Multiple conditions and async operations blocked simple content showing

Fixes Applied

✅ Fix 1: Corrected iframe srcDoc Logic

// Before (BROKEN):
srcDoc={activeIframeIndex === 0 ? displayHtml : ''}
srcDoc={activeIframeIndex === 1 ? displayHtml : secondaryHtml}

// After (FIXED):
srcDoc={displayHtml}
srcDoc={secondaryHtml || displayHtml}

✅ Fix 2: Initialize Secondary HTML Properly

// Before:
const [secondaryHtml, setSecondaryHtml] = useState('');

// After:
const [secondaryHtml, setSecondaryHtml] = useState(html);

✅ Fix 3: Simplified Update Logic

• ALWAYS update displayHtml immediately when html prop changes
• Prioritize showing content over complex transition effects
• Use enhanced updates only during AI streaming for improvements
• Removed blocking conditions that prevented basic HTML display

✅ Fix 4: Enhanced Debug Logging

• Added console logs to track HTML content flow
• Monitor component mounting and state initialization
• Track when displayHtml gets updated

Expected Results

✅ Immediate Benefits:

1. Starter HTML displays - Preview shows default HTML content on load
2. Basic HTML rendering works - Any HTML content should display properly
3. No more white page - Content is always visible in the preview
4. Reliable updates - HTML changes reflect in the preview consistently

✅ Maintained Features:

1. Smooth transitions - Enhanced updates during AI streaming
2. Dual iframe system - For zero-flash transitions when needed
3. Loading indicators - Subtle progress feedback during AI work
4. Mobile/desktop responsive - All device styling preserved

Testing Checklist

• Preview shows starter HTML on fresh page load
• Manual HTML edits reflect in preview immediately
• AI-generated content displays after streaming
• No white page or blank content issues
• Smooth transitions work during AI updates

The core issue was the iframe content assignment logic - now both iframes always have valid HTML content to display.