Hide mermaid ERD text prior to rendering to prevent flash

templates/dashboard/settings/database_schema.html

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