From 08fe9a5b2ed6f33492fcd80a59c4ced26f93f650 Mon Sep 17 00:00:00 2001
From: Jason Heppler <jason.heppler@gmail.com>
Date: Thu, 1 Aug 2024 14:51:17 -0500
Subject: [PATCH] feat: Add loading spinner to OpenSeaDragon viewer

This commit adds a Tailwind-based SVG loading spinner to the
OpenSeaDragon viewer.
---
 static/css/custom.css          | 14 ++++++++++++
 templates/manuscript_page.html | 41 +++++++++++++++++++++++++++++-----
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/static/css/custom.css b/static/css/custom.css
index 644e7a4..34bf16e 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -24,3 +24,17 @@
 .active {
     font-weight: bold;
 }
+
+.loader {
+    border-top-color: #3498db;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/templates/manuscript_page.html b/templates/manuscript_page.html
index 25c4214..21ff04a 100644
--- a/templates/manuscript_page.html
+++ b/templates/manuscript_page.html
@@ -13,6 +13,28 @@
     <div class="relative max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-2">
         <div class="mt-12 grid grid-cols-4 gap-2">
             <div class="col-span-3">
+                <div id="loading-spinner" class="flex justify-center items-center h-full">
+                    <svg class="h-32 w-32 animate-spin" viewBox="0 0 100 100">
+                        <circle
+                            fill="none"
+                            stroke-width="10"
+                            class="stroke-current opacity-40"
+                            cx="50"
+                            cy="50"
+                            r="40"
+                        />
+                        <circle
+                            fill="none"
+                            stroke-width="10"
+                            class="stroke-current"
+                            stroke-dasharray="250"
+                            stroke-dashoffset="210"
+                            cx="50"
+                            cy="50"
+                            r="40"
+                        />
+                    </svg>
+                </div>
                 <div id="openseadragon_viewer" class="openseadragon">
                     <script type="text/javascript">
                         let page_url = encodeURI("{{ cleaned_url }}")
@@ -27,6 +49,11 @@
                             homeFillsViewer: false,
                             visibilityRatio: 1,
                         })
+
+                        viewer.addHandler('open', function () {
+                            document.getElementById('loading-spinner').style.display = 'none';
+                            document.getElementById('openseadragon_viewer').classList.remove('hidden');
+                        });
                     </script>
                 </div>
                 {% if previous_page %}
@@ -81,8 +108,10 @@
                     {% if manuscript_page.attached_images.all.1 %}
                         <hr class="mt-3 mb-3" />
                         <div class="mt-4">
-                            <a class="underline hover:no-underline" href="{% url 'forensic_page' manuscript_page.attached_images.all.1.id %}">
-                                <img class="w-32 h-32 object-cover" src="{{ manuscript_page.attached_images.all.1.image.url }}" alt="First Forensic Image">
+                            <a class="underline hover:no-underline"
+                               href="{% url 'forensic_page' manuscript_page.attached_images.all.1.id %}">
+                                <img class="w-32 h-32 object-cover" src="{{ manuscript_page.attached_images.all.1.image.url }}"
+                                     alt="First Forensic Image">
                                 <caption>View the forensic images for this page</caption>
                             </a>
                         </div>
@@ -152,7 +181,8 @@ <h3 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Document Deta
                 <li><strong>Page</strong>: {{ manuscript_page.page_range }}</li>
                 <li><strong>Page tagged with</strong>:
                     {% for tag in manuscript_page.tags.all %}
-                        <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-winterthur-dk-blue ring-1 ring-inset ring-blue-700/10">{{ tag.name }}</span>
+                        <span
+                            class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-winterthur-dk-blue ring-1 ring-inset ring-blue-700/10">{{ tag.name }}</span>
                     {% endfor %}
                 </li>
             </ul>
@@ -169,9 +199,8 @@ <h3 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Document Deta
             <h2 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Cite this page</h2>
             <p><em>The Denig Manuscript</em>, Winterthur Museum, Garden & Library and the Roy Rosenzweig Center
                 for
-                History and New Media (2024--): p. {{ manuscript_page.page_range }}. <a
-                    href="{% url 'manuscript' %}"
-                    class="text-winterthur-dk-blue hover:underline">https://denig.rrchnm.org/manuscript/{{manuscript_page.id}}</a>
+                History and New Media (2024--): p. {{ manuscript_page.page_range }}. <a href="{% url 'manuscript' %}"
+                                                                                        class="text-winterthur-dk-blue hover:underline">https://denig.rrchnm.org/manuscript/{{manuscript_page.id}}</a>
             </p>
         </div>
     </div>