peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide mermaid ERD text prior to rendering to prevent flash

Browse Source
This commit is contained in:
Peter Stockings
2025-12-03 16:46:34 +11:00
parent 9311893c57
commit 54dbcb45fa
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/dashboard/settings/database_schema.html
View File

@@ -2,7 +2,7 @@
{% block page %} {% block page %}
<div class="p-6 max-w-7xl mx-auto"> <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"> <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-px flex space-x-8"> <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" <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> <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>
<div id="mermaid-diagram" <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"> 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 erDiagram
{% for table in schema_info %} {% for table in schema_info %}
{{ table.table_name|upper }} { {{ table.table_name|upper }} {
@@ -237,6 +237,8 @@ erDiagram
}); });
try { try {
await mermaid.default.run({ querySelector: '.mermaid' }); await mermaid.default.run({ querySelector: '.mermaid' });
// Show diagram after successful rendering
document.querySelector('.mermaid').classList.remove('invisible');
console.log('Mermaid diagram rendered successfully'); console.log('Mermaid diagram rendered successfully');
} catch (error) { } catch (error) {
console.error('Mermaid error:', error); console.error('Mermaid error:', error);