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

Add loading spinner for mermaid ERD

Browse Source
This commit is contained in:
Peter Stockings
2025-12-03 17:04:56 +11:00
parent 54dbcb45fa
commit c5eb1ce463
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,18 @@
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
<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">
class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto ">
<!-- Loading Spinner -->
<div id="mermaid-loading" class="flex flex-col items-center">
<svg class="animate-spin h-12 w-12 text-blue-500 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<p class="text-sm text-gray-600 dark:text-gray-400">Loading diagram...</p>
</div>
<pre class="mermaid invisible">
erDiagram
{% for table in schema_info %}
@@ -237,7 +248,8 @@ erDiagram
});
try {
await mermaid.default.run({ querySelector: '.mermaid' });
// Show diagram after successful rendering
// Hide spinner and show diagram after successful rendering
document.getElementById('mermaid-loading').classList.add('hidden');
document.querySelector('.mermaid').classList.remove('invisible');
console.log('Mermaid diagram rendered successfully');
} catch (error) {