From 54dbcb45fa81576607796e4763ae46517c91e24b Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Wed, 3 Dec 2025 16:46:34 +1100
Subject: [PATCH] Hide mermaid ERD text prior to rendering to prevent flash

---
 templates/dashboard/settings/database_schema.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/templates/dashboard/settings/database_schema.html b/templates/dashboard/settings/database_schema.html
index 4be5a8a..b830aea 100644
--- a/templates/dashboard/settings/database_schema.html
+++ b/templates/dashboard/settings/database_schema.html
@@ -2,7 +2,7 @@
 
 {% block page %}
 <div class="p-6 max-w-7xl mx-auto">
-    <!-- Settings Navigation -->
+    <!--  Settings Navigation -->
     <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
         <nav class="-mb-px flex space-x-8">
             <a hx-get="{{ url_for('settings.api_keys') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
@@ -41,7 +41,7 @@
         <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>
         <div id="mermaid-diagram"
             class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
-            <pre class="mermaid">
+            <pre class="mermaid invisible">
 erDiagram
 {% for table in schema_info %}
     {{ table.table_name|upper }} {
@@ -237,6 +237,8 @@ erDiagram
     });
     try {
         await mermaid.default.run({ querySelector: '.mermaid' });
+        // Show diagram after successful rendering
+        document.querySelector('.mermaid').classList.remove('invisible');
         console.log('Mermaid diagram rendered successfully');
     } catch (error) {
         console.error('Mermaid error:', error);