fix: resolve UI issues with landing page gap and missing loading overlay

- Implement three-state page system (input → loading → results) with yield-based transitions
- Fix landing page gap by using align-items: flex-start on portfolio row
- Reduce preview-card min-height from 400px to 300px for better column alignment
- Add animated loading page component with rotating educational messages
- Configure show_progress="full" for prominent built-in progress indicator
- WebSocket deprecation warning suppression already in place (waiting for uvicorn update)

app.py

@@ -613,12 +613,44 @@ def create_interface() -> gr.Blocks:
         border: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 12px;
         padding: 1.5rem;
-        min-height: 400px;
+        min-height: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Portfolio row - natural heights without stretching */
+    .portfolio-row {
+        align-items: flex-start !important;
+    }
+
+    /* Loading page styling */
+    .loading-header {
+        animation: fadeIn 0.5s ease-in;
+    }
+
+    .loading-message {
+        text-align: center;
+        font-size: 1.1rem;
+        color: #048CFC;
+        padding: 2rem;
+        min-height: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
     /* Example buttons styling */
     .gr-examples button {
         background: linear-gradient(135deg, rgba(4, 140, 252, 0.1), rgba(17, 199, 170, 0.1));
@@ -696,7 +728,7 @@ def create_interface() -> gr.Blocks:
         # Input Page with side-by-side layout
         with gr.Group(visible=True) as input_page:
             # Side-by-side input and preview
-            with gr.Row():
+            with gr.Row(equal_height=False, elem_classes="portfolio-row"):
                 # Left column: Input
                 with gr.Column(scale=1):
                     portfolio_input = gr.Textbox(
@@ -773,6 +805,31 @@ def create_interface() -> gr.Blocks:
                         """
                     )
 
+        # Loading Page
+        with gr.Group(visible=False) as loading_page:
+            with gr.Row():
+                with gr.Column():
+                    gr.HTML(
+                        """
+                        <div style='text-align: center; padding: 4rem 2rem;'>
+                            <div style='font-size: 3rem; margin-bottom: 1rem;'>⚡</div>
+                            <h2 style='color: #048CFC; margin-bottom: 1rem;'>Analysing Your Portfolio</h2>
+                        </div>
+                        """,
+                        elem_classes="loading-header"
+                    )
+                    loading_message = gr.Markdown(
+                        value="Initialising analysis...",
+                        elem_classes="loading-message",
+                    )
+                    gr.HTML(
+                        """
+                        <div style='text-align: center; padding: 2rem; color: #999; font-size: 14px;'>
+                            <p>This may take a few seconds as we process real-time market data</p>
+                        </div>
+                        """
+                    )
+
         # Results Page (unified dashboard)
         with gr.Group(visible=False) as results_page:
             with gr.Row():
@@ -811,14 +868,32 @@ def create_interface() -> gr.Blocks:
             }
 
         async def handle_analysis(portfolio_text, progress=gr.Progress()):
+            # Show loading page immediately
+            yield {
+                input_page: gr.update(visible=False),
+                loading_page: gr.update(visible=True),
+                results_page: gr.update(visible=False),
+                loading_message: random.choice(LOADING_MESSAGES),
+                analysis_output: "",
+                allocation_plot: None,
+                risk_plot: None,
+                performance_plot: None,
+                correlation_plot: None,
+                optimization_plot: None
+            }
+
+            # Run analysis with progress updates
             page, analysis, alloc, risk, perf, corr, opt = await run_analysis_with_ui_update(
                 portfolio_text, progress
             )
 
+            # Show results or return to input
             if page == "results":
-                return {
+                yield {
                     input_page: gr.update(visible=False),
+                    loading_page: gr.update(visible=False),
                     results_page: gr.update(visible=True),
+                    loading_message: "Analysis complete!",
                     analysis_output: analysis,
                     allocation_plot: alloc,
                     risk_plot: risk,
@@ -827,9 +902,11 @@ def create_interface() -> gr.Blocks:
                     optimization_plot: opt
                 }
             else:
-                return {
+                yield {
                     input_page: gr.update(visible=True),
+                    loading_page: gr.update(visible=False),
                     results_page: gr.update(visible=False),
+                    loading_message: "",
                     analysis_output: analysis,
                     allocation_plot: None,
                     risk_plot: None,
@@ -850,14 +927,17 @@ def create_interface() -> gr.Blocks:
             inputs=[portfolio_input],
             outputs=[
                 input_page,
+                loading_page,
                 results_page,
+                loading_message,
                 analysis_output,
                 allocation_plot,
                 risk_plot,
                 performance_plot,
                 correlation_plot,
                 optimization_plot
-            ]
+            ],
+            show_progress="full"
         )
 
         new_analysis_btn.click(