Hide mermaid ERD text prior to rendering to prevent flash

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);