From c5eb1ce4637982a16827025fc11e19a367ed0c0f Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Wed, 3 Dec 2025 17:04:56 +1100
Subject: [PATCH] Add loading spinner for mermaid ERD

---
 .../dashboard/settings/database_schema.html      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/templates/dashboard/settings/database_schema.html b/templates/dashboard/settings/database_schema.html
index b830aea..4b55853 100644
--- a/templates/dashboard/settings/database_schema.html
+++ b/templates/dashboard/settings/database_schema.html
@@ -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) {